:root{
  --bg:#08060f; --bg2:#110c1e; --panel:#171029; --line:#2c1f4a;
  --ink:#f0ecff; --soft:#a99fce; --hot:#ff2d78; --cyan:#22e0ff; --gold:#ffd15c;
  --maxw:1240px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 "Sora",system-ui,sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:"Chakra Petch",sans-serif;font-weight:700;line-height:1.02;margin:0;text-transform:uppercase;letter-spacing:.01em}
.btn{display:inline-block;font-family:"Chakra Petch",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.82rem;padding:13px 24px;color:#0a0616;
  background:linear-gradient(120deg,var(--cyan),var(--hot));border:0;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);clip-path:none}

.site-head{position:sticky;top:0;z-index:20;background:rgba(8,6,15,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:26px;padding:14px 24px}
.brand{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:1.2rem;letter-spacing:.16em;
  background:linear-gradient(90deg,var(--cyan),var(--hot));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand span{display:block;font-size:.56rem;letter-spacing:.28em;color:var(--soft);-webkit-text-fill-color:var(--soft)}
.site-head nav{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap}
.site-head nav a{font-family:"Chakra Petch",sans-serif;text-transform:uppercase;letter-spacing:.09em;
  font-size:.76rem;color:var(--soft);padding:8px 12px}
.site-head nav a:hover{color:var(--cyan)}

.hero{position:relative;padding:80px 0 30px;
  background:radial-gradient(90% 60% at 20% 0%,#1c1140 0,var(--bg) 55%),
             radial-gradient(80% 60% at 100% 20%,#2a0f2c 0,transparent 55%)}
.hero-inner{max-width:760px}
.kicker{font-family:"Chakra Petch",sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:var(--hot);margin:0 0 16px}
.hero-title{font-size:clamp(2.8rem,8vw,6rem)}
.hero-lede{color:var(--soft);max-width:42ch;margin:20px 0 26px;font-size:1.1rem}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-strip{display:flex;gap:12px;margin-top:50px;overflow-x:auto;padding:6px 24px 14px;scrollbar-width:none}
.hero-strip::-webkit-scrollbar{display:none}
.hero-strip a{flex:0 0 clamp(150px,19vw,210px);border:1px solid var(--line);
  background:var(--panel);padding:5px;transition:.2s;transform:rotate(-1deg)}
.hero-strip a:nth-child(even){transform:rotate(1.5deg)}
.hero-strip a:hover{transform:translateY(-8px) rotate(0);border-color:var(--cyan);box-shadow:0 0 24px #22e0ff55}
.hero-strip img{aspect-ratio:3/4;object-fit:cover}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:50px auto;max-width:var(--maxw);padding:0 24px}
.stats>div{background:var(--bg2);border:1px solid var(--line);padding:22px;text-align:center;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.stats b{font-family:"Chakra Petch",sans-serif;font-size:2.3rem;display:block;color:var(--cyan)}
.stats span{font-family:"Chakra Petch",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.64rem;color:var(--soft)}
@media(max-width:640px){.stats{grid-template-columns:1fr 1fr}}

section.wrap,.home-fac,.home-cats,.home-join,.home-spotlight{padding:50px 24px;max-width:var(--maxw);margin:0 auto}
.home-fac h2,.home-cats h2,.home-join h2,.home-spotlight h2,.page-head h1{font-size:clamp(1.7rem,3.6vw,2.7rem);margin-bottom:24px}
.home-fac h2::after,.home-cats h2::after{content:"";display:block;width:60px;height:3px;background:linear-gradient(90deg,var(--cyan),var(--hot));margin-top:10px}
.lede{color:var(--soft)}
.page-head{padding:56px 24px 8px;max-width:var(--maxw);margin:0 auto}

.fac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.fac-card{background:var(--bg2);border:1px solid var(--line);padding:20px;transition:.2s;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.fac-card:hover{border-color:var(--hot);box-shadow:0 0 20px #ff2d7833}
.fac-card h3{color:var(--gold);font-size:1.05rem;margin-bottom:8px}
.fac-card p{color:var(--soft);font-size:.88rem;margin:0 0 10px}
.fac-card span{font-family:"Chakra Petch",sans-serif;color:var(--cyan);font-size:.8rem}

/* the deck cards */
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:6px}
.ch-card{background:var(--panel);border:1px solid var(--line);padding:6px;transition:.18s;position:relative}
.ch-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,#ffffff22 50%,transparent 60%);opacity:0;transition:.2s}
.ch-card:hover{transform:translateY(-6px) scale(1.02);border-color:var(--cyan);box-shadow:0 10px 30px #22e0ff33,inset 0 0 0 1px #22e0ff55}
.ch-card:hover::before{opacity:1}
.ch-art{aspect-ratio:3/4;background:#0b0716;overflow:hidden}
.ch-art img{width:100%;height:100%;object-fit:contain}
.ch-initial{font-family:"Chakra Petch",sans-serif;font-size:3rem;color:var(--line);display:grid;place-items:center;height:100%}
.ch-meta{padding:10px 8px 6px}
.ch-name{font-family:"Chakra Petch",sans-serif;text-transform:uppercase;display:block;font-size:.98rem}
.ch-role{color:var(--soft);font-size:.76rem}

.filters{display:flex;gap:6px;flex-wrap:wrap;padding:0 24px 20px;max-width:var(--maxw);margin:0 auto}
.filters button{font-family:"Chakra Petch",sans-serif;text-transform:uppercase;font-size:.7rem;letter-spacing:.06em;
  padding:7px 13px;background:var(--bg2);border:1px solid var(--line);cursor:pointer;color:var(--soft)}
.filters button.on{background:linear-gradient(90deg,var(--cyan),var(--hot));color:#0a0616;border:0}

.fac-list{display:grid;gap:10px;margin-top:18px}
.fac-row{background:var(--bg2);border:1px solid var(--line);padding:22px}
.fac-row:hover{border-color:var(--hot)}
.fac-row h2{color:var(--gold);font-size:1.3rem;margin-bottom:8px}
.fac-row p{color:var(--soft);max-width:72ch;margin:0 0 10px}
.fac-count{font-family:"Chakra Petch",sans-serif;color:var(--cyan);font-size:.78rem}

.ch-hero{position:relative;min-height:66vh;display:flex;align-items:flex-end;overflow:hidden}
.ch-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0%;filter:brightness(.85) saturate(1.1)}
.ch-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg),transparent 60%)}
.ch-hero-txt{position:relative;z-index:2;padding:44px 24px}
.ch-hero-txt h1{font-size:clamp(2.4rem,6vw,4.6rem)}
.ch-title{color:var(--gold);margin:8px 0 0}
.back{font-family:"Chakra Petch",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--cyan)}
.ch-facts{list-style:none;padding:0;display:flex;gap:22px;flex-wrap:wrap;margin:18px 0 0}
.ch-facts li{font-family:"Chakra Petch",sans-serif}
.ch-facts li span{display:block;font-size:.6rem;letter-spacing:.14em;color:var(--soft);text-transform:uppercase}
.ch-body{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;padding:44px 24px;max-width:var(--maxw);margin:0 auto}
@media(max-width:820px){.ch-body{grid-template-columns:1fr}}
.ch-bio p{font-size:1.05rem;margin:0 0 1em;color:#ded8f5}
.ch-turn h3{font-family:"Chakra Petch",sans-serif;text-transform:uppercase;font-size:.82rem;letter-spacing:.1em;color:var(--soft);margin-bottom:12px}
.turn-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.turn-row img{background:repeating-conic-gradient(#171029 0 25%,#110c1e 0 50%) 50%/16px 16px;border:1px solid var(--line)}

.lore-wrap{max-width:760px;padding:38px 24px;margin:0 auto}
.lore h2,.lore h3{color:var(--gold);margin:30px 0 12px;font-size:1.3rem}
.lore p{color:#d5cff0;margin:0 0 1em}
.lore-div{text-align:center;color:var(--cyan)!important}
hr{border:0;border-top:1px solid var(--line);margin:36px 0}

.loc-list{columns:2;column-gap:44px;padding:28px 24px}
@media(max-width:760px){.loc-list{columns:1}}
.loc-row{break-inside:avoid;margin-bottom:22px}
.loc-row h2{font-size:1.05rem;color:var(--gold)}
.loc-row p{color:var(--soft);font-size:.9rem;margin:0}

.ep-list{list-style:none;padding:24px;max-width:54rem;margin:0 auto}
.ep-row{display:flex;gap:18px;padding:22px 0;border-top:1px solid var(--line);opacity:.5}
.ep-row.is-written{opacity:1}
.ep-n{font-family:"Chakra Petch",sans-serif;font-size:1.5rem;color:var(--hot)}
.ep-row h2{font-size:1.2rem}
.ep-log{color:var(--gold);margin:4px 0}
.ep-syn{color:var(--soft);font-size:.92rem;margin:0}

.home-join,.home-spotlight{background:var(--bg2);border:1px solid var(--line)}
.join{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.join input{padding:12px 14px;background:var(--bg);border:1px solid var(--line);color:var(--ink);min-width:230px}
.join .msg{color:var(--cyan);font-size:.9rem}

.site-foot{border-top:1px solid var(--line);padding:38px 24px;text-align:center;color:var(--soft);font-size:.9rem}
.site-foot .fine{font-size:.8rem;opacity:.85}
.site-foot a,.more a{color:var(--cyan)}
.more a{font-family:"Chakra Petch",sans-serif;letter-spacing:.06em}

/* wide hero images: cover edge-to-edge on desktop (no letterbox bars), stay
   contain on mobile so the portrait fallback isn't cropped badly */
@media(min-width:760px){.ch-hero-wide{object-fit:cover}}