:root{
  --ink:#0b0a24; --panel:rgba(40,34,98,.55); --panel2:rgba(24,19,66,.72); --line:rgba(196,186,255,.30);
  --text:#f4f1fd; --muted:#bcb5e0; --gold:#dcb95f; --gold2:#f0d488; --glow:rgba(146,124,255,.5);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif; color:var(--text); min-height:100vh;
  background:
    radial-gradient(1150px 560px at 88% -10%, rgba(122,94,230,.55), transparent 62%),
    radial-gradient(950px 620px at 6% 108%, rgba(74,54,190,.5), transparent 62%),
    radial-gradient(700px 420px at 50% 46%, rgba(64,48,160,.28), transparent 70%),
    linear-gradient(160deg,#060518 0%, #130e36 46%, #251b60 100%);
  overflow-x:hidden;
}
.stars{position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, #fff, transparent), radial-gradient(1.2px 1.2px at 34% 68%, #dcd4ff, transparent),
    radial-gradient(1.8px 1.8px at 58% 14%, #fff, transparent), radial-gradient(1.2px 1.2px at 76% 42%, #cfc6ff, transparent),
    radial-gradient(1.5px 1.5px at 90% 74%, #fff, transparent), radial-gradient(1.1px 1.1px at 24% 88%, #e6e0ff, transparent),
    radial-gradient(1.3px 1.3px at 66% 84%, #fff, transparent), radial-gradient(1.1px 1.1px at 44% 38%, #d8d0ff, transparent),
    radial-gradient(1.4px 1.4px at 5% 52%, #fff, transparent), radial-gradient(1.1px 1.1px at 95% 30%, #e9e4ff, transparent);
  opacity:.85; animation:tw 5.5s ease-in-out infinite alternate}
@keyframes tw{from{opacity:.6}to{opacity:.95}}
.masthead{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding:46px 50px 4px; flex-wrap:wrap}
.kicker{font-size:15px; letter-spacing:.42em; font-weight:600; padding-top:16px}
.kicker::after{content:""; display:block; width:64px; height:2px; background:linear-gradient(90deg,var(--gold),transparent); margin-top:12px}
.brand{font-family:'Fraunces',serif; font-weight:650; font-size:clamp(32px,4.6vw,54px); text-align:right; line-height:1.02}
.brand em{font-style:italic; color:var(--gold)}
.tagline{position:relative; z-index:2; width:100%; text-align:center; color:var(--muted); font-size:16.5px; line-height:1.6; margin-top:16px}
.tagline b{color:var(--gold2); font-weight:600}
.orn{position:relative; z-index:2; display:flex; align-items:center; gap:14px; max-width:520px; margin:20px auto 2px; color:var(--gold)}
.orn::before,.orn::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.orn span{font-size:11px; transform:rotate(45deg); width:8px; height:8px; background:var(--gold); display:block}
.scene{position:relative; z-index:1; perspective:1500px; padding:22px 34px 10px}
.stage{transform-style:preserve-3d; will-change:transform; display:grid; grid-template-columns:repeat(12,1fr); gap:18px; max-width:1480px; margin:0 auto}
.panel{
  position:relative; background:linear-gradient(175deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:20px;
  padding:20px 18px 22px; backdrop-filter:blur(10px);
  box-shadow:0 26px 55px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09);
  transform:translateZ(0); transition:transform .45s cubic-bezier(.2,.8,.25,1), box-shadow .45s;
}
.panel::before{content:""; position:absolute; top:0; left:22px; right:22px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.75}
.panel:hover{transform:translateZ(48px); box-shadow:0 46px 85px rgba(0,0,0,.58), 0 0 0 1px rgba(220,185,95,.4), 0 0 50px var(--glow)}
.panel h2{font-size:12.5px; letter-spacing:.3em; font-weight:600; text-align:center; color:#ece7ff; margin-bottom:18px; display:flex; align-items:center; gap:12px}
.panel h2::before,.panel h2::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(220,185,95,.55),transparent)}
.panel:nth-child(1){grid-column:span 4}.panel:nth-child(2){grid-column:span 4}
.panel:nth-child(3){grid-column:span 3}.panel:nth-child(4){grid-column:span 1; min-width:172px}
.panel:nth-child(5){grid-column:span 4}.panel:nth-child(6){grid-column:span 4}
.panel:nth-child(7){grid-column:span 4}.panel:nth-child(8){grid-column:span 7}
.panel:nth-child(9){grid-column:span 5}
.grid{display:flex; flex-wrap:wrap; justify-content:center; gap:18px 14px}
.card{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; width:120px; text-decoration:none; color:var(--text);
  transform:translateZ(0); transition:transform .32s cubic-bezier(.2,.8,.25,1)}
.card:hover{transform:translateZ(36px) scale(1.07)}
.face{width:88px; height:88px; border-radius:50%; object-fit:cover; object-position:top center;
  border:2px solid rgba(220,185,95,.7); box-shadow:0 12px 26px rgba(0,0,0,.55), 0 0 20px rgba(146,124,255,.35), inset 0 0 0 3px rgba(10,8,36,.55); background:#1d1760}
.card:hover .face{border-color:var(--gold2); box-shadow:0 18px 34px rgba(0,0,0,.6), 0 0 30px rgba(220,185,95,.45)}
.pname{font-size:13px; font-weight:600; line-height:1.3; margin-top:10px}
.pfound{font-size:10.5px; color:var(--muted); line-height:1.35; margin-top:2px}
.read{margin-top:7px; font-size:9.5px; letter-spacing:.16em; font-weight:600; color:var(--gold); opacity:0; transform:translateY(3px); transition:.3s}
.card:hover .read{opacity:1; transform:none}
body.io .rv{opacity:0; transform:translateY(16px)}
body.io .rv.in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.25,1)}
.foot{position:relative; z-index:2; text-align:center; color:var(--muted); padding:32px 20px 44px; font-size:14px}
.foot .fine{font-size:11.5px; margin-top:12px; opacity:.75; line-height:1.6}
/* player pages */
.hero{position:relative; z-index:2; max-width:1080px; margin:0 auto; padding:54px 26px 10px; display:flex; gap:38px; align-items:center; flex-wrap:wrap}
.halo{position:relative; flex:none}
.halo::before{content:""; position:absolute; inset:-34px; border-radius:50%;
  background:radial-gradient(circle, rgba(220,185,95,.35), rgba(146,124,255,.18) 55%, transparent 72%); filter:blur(6px)}
.halo .face{position:relative; width:184px; height:184px; border-width:3px}
.hero h1{font-family:'Fraunces',serif; font-size:clamp(38px,5.8vw,60px); font-weight:650; line-height:1.03}
.hero .found{color:var(--gold); font-size:17.5px; font-weight:600; margin-top:9px; letter-spacing:.03em}
.hero .cats{color:var(--muted); font-size:12.5px; letter-spacing:.22em; margin-top:11px; font-weight:600}
.backlink{position:relative; z-index:2; display:inline-block; margin:26px 0 0 26px; color:var(--muted); text-decoration:none; font-size:13.5px; letter-spacing:.08em}
.backlink:hover{color:var(--gold)}
.wrap{position:relative; z-index:2; max-width:1080px; margin:0 auto; padding:12px 26px 34px}
.lede{font-size:19px; line-height:1.68; color:#eae5fc; margin:20px 0 10px}
.lede::first-letter{font-family:'Fraunces',serif; font-size:52px; font-weight:650; color:var(--gold); float:left; line-height:.85; padding:5px 10px 0 0}
.secttl{font-size:12.5px; letter-spacing:.3em; font-weight:600; color:var(--gold); margin:38px 0 16px; display:flex; align-items:center; gap:14px}
.secttl::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(220,185,95,.55),transparent)}
.works{display:grid; grid-template-columns:repeat(auto-fit,minmax(305px,1fr)); gap:16px}
.work{background:linear-gradient(175deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:16px; padding:21px 23px; backdrop-filter:blur(9px);
  box-shadow:0 18px 40px rgba(0,0,0,.42); transition:transform .3s, box-shadow .3s}
.work:hover{transform:translateY(-5px); box-shadow:0 28px 52px rgba(0,0,0,.5), 0 0 26px rgba(146,124,255,.25)}
.work h3{font-family:'Fraunces',serif; font-size:20.5px; font-weight:650; margin:7px 0 8px}
.work p{font-size:14.5px; line-height:1.62; color:#ded9f7}
.work .yr{display:inline-block; color:#14102e; background:linear-gradient(90deg,var(--gold),var(--gold2)); font-weight:600; font-size:11px; letter-spacing:.14em; border-radius:99px; padding:3px 10px}
.timeline{margin:4px 0 4px 8px; padding-left:26px; position:relative}
.timeline::before{content:""; position:absolute; left:4px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--gold),rgba(220,185,95,.12))}
.timeline div{margin-bottom:15px; font-size:15.5px; line-height:1.55; color:#ded9f7; position:relative}
.timeline div::before{content:""; position:absolute; left:-27.5px; top:6px; width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px rgba(220,185,95,.7)}
.timeline b{color:var(--gold2); font-weight:600}
.watch{display:flex; gap:16px; align-items:center; background:rgba(220,185,95,.1); border:1px solid rgba(220,185,95,.45); border-radius:16px; padding:19px 23px; margin-top:10px}
.watch p{font-size:15.5px; line-height:1.55}
.watch a{color:var(--gold); font-weight:600; white-space:nowrap}
.nextnav{display:flex; justify-content:space-between; gap:14px; margin-top:42px; flex-wrap:wrap}
.nextnav a{color:var(--muted); text-decoration:none; font-size:14px; border:1px solid var(--line); border-radius:99px; padding:9px 18px; background:rgba(24,19,66,.5)}
.nextnav a:hover{color:var(--gold); border-color:rgba(220,185,95,.5)}
@media (max-width:900px){
  .stage{grid-template-columns:repeat(6,1fr)}
  .panel{grid-column:span 6 !important}
  .masthead{padding:32px 22px 4px}
  .scene{padding:18px 14px 4px}
  .halo .face{width:140px; height:140px}
}
/* membership */
.join{position:relative; z-index:2; max-width:880px; margin:30px auto 8px; padding:0 20px}
.join-in{position:relative; overflow:hidden; background:linear-gradient(175deg,var(--panel),var(--panel2)); border:1px solid rgba(220,185,95,.45); border-radius:22px; padding:36px 38px 30px; box-shadow:0 30px 60px rgba(0,0,0,.5), 0 0 44px rgba(146,124,255,.22); backdrop-filter:blur(10px)}
.join-in::before{content:""; position:absolute; top:0; left:24px; right:24px; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.join-h{font-family:'Fraunces',serif; font-size:clamp(26px,3.6vw,38px); font-weight:650; text-align:center; line-height:1.15}
.join-h em{font-style:italic; color:var(--gold)}
.join-sub{text-align:center; color:var(--muted); margin:11px auto 24px; max-width:580px; line-height:1.6; font-size:15.5px}
.jform{display:grid; gap:14px}
.jrow{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.jform label{font-size:11.5px; letter-spacing:.18em; font-weight:600; color:var(--muted); display:grid; gap:7px}
.jform input,.jform select{background:rgba(10,8,36,.55); border:1px solid var(--line); border-radius:12px; padding:13px 15px; color:var(--text); font-size:15.5px; font-family:'Inter',sans-serif; outline:none; transition:border-color .25s, box-shadow .25s; width:100%}
.jform input:focus,.jform select:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(220,185,95,.18)}
.jform select option{background:#17123f; color:var(--text)}
.jform button{margin-top:8px; background:linear-gradient(90deg,var(--gold),var(--gold2)); color:#171128; font-weight:700; font-size:16.5px; letter-spacing:.03em; border:none; border-radius:99px; padding:15px 22px; cursor:pointer; box-shadow:0 14px 30px rgba(220,185,95,.28); transition:transform .25s, box-shadow .25s}
.jform button:hover{transform:translateY(-2px); box-shadow:0 20px 38px rgba(220,185,95,.4)}
.jnote{text-align:center; font-size:12.5px; color:var(--muted); opacity:.85}
.jbtn{display:inline-block; margin-top:16px; color:var(--gold2); text-decoration:none; font-weight:600; font-size:13.5px; letter-spacing:.14em; border:1px solid rgba(220,185,95,.55); border-radius:99px; padding:9px 20px; background:rgba(220,185,95,.08); transition:.25s}
.jbtn:hover{background:rgba(220,185,95,.18); transform:translateY(-1px)}
.thanks{position:relative; z-index:2; max-width:760px; margin:0 auto; padding:11vh 26px 20px; text-align:center}
.thanks h1{font-family:'Fraunces',serif; font-size:clamp(40px,6.4vw,64px); font-weight:650; line-height:1.05}
.thanks h1 em{font-style:italic; color:var(--gold)}
.thanks p{color:var(--muted); font-size:17.5px; line-height:1.65; margin-top:18px}
@media (max-width:640px){.jrow{grid-template-columns:1fr} .join-in{padding:28px 22px 24px}}
/* mobile polish */
.jform input,.jform select{font-size:16px}
.watch{flex-wrap:wrap}
@media (max-width:640px){
  .masthead{flex-direction:column; align-items:center; text-align:center; gap:8px; padding:30px 18px 2px}
  .brand{text-align:center}
  .kicker{padding-top:0}
  .kicker::after{margin:10px auto 0}
  .tagline{font-size:15.5px; padding:0 14px}
  .panel{padding:16px 12px 18px}
  .card{width:106px}
  .face{width:80px; height:80px}
  .hero{gap:20px; padding:36px 18px 6px}
  .wrap{padding:8px 18px 28px}
  .lede{font-size:17.5px}
  .nextnav a{flex:1; text-align:center}
  .thanks{padding-top:8vh}
}
/* membership v2: invitation band + popup form */
.join{max-width:1120px; margin:38px auto 12px; padding:0 22px}
.join-band{display:flex; align-items:center; justify-content:space-between; gap:30px; padding:28px 14px; border-top:1px solid rgba(220,185,95,.38); border-bottom:1px solid rgba(220,185,95,.38); background:linear-gradient(90deg, rgba(220,185,95,.05), rgba(146,124,255,.07), rgba(220,185,95,.05))}
.join-band .join-h{text-align:left; font-size:clamp(22px,3vw,31px)}
.join-band .join-sub{text-align:left; margin:9px 0 0; max-width:650px}
.join-cta{flex:none; background:linear-gradient(90deg,var(--gold),var(--gold2)); color:#171128; font-family:'Inter',sans-serif; font-weight:700; font-size:16px; letter-spacing:.02em; border:none; border-radius:99px; padding:15px 30px; cursor:pointer; box-shadow:0 14px 30px rgba(220,185,95,.28); transition:transform .25s, box-shadow .25s}
.join-cta:hover{transform:translateY(-2px); box-shadow:0 20px 38px rgba(220,185,95,.42)}
.jbtn{font-family:'Inter',sans-serif; cursor:pointer}
.jbtn.small{margin-top:0; padding:8px 18px; font-size:12px}
.pcorner{position:absolute; top:22px; right:26px; z-index:5}
.modal{position:fixed; inset:0; z-index:60; display:none}
.modal.open{display:block}
.modal-back{position:absolute; inset:0; background:rgba(4,3,18,.74); backdrop-filter:blur(7px); animation:mfade .3s ease}
.modal-card{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px, calc(100vw - 30px)); max-height:calc(100vh - 36px); overflow:auto; background:linear-gradient(175deg,#251d61,#161133); border:1px solid rgba(220,185,95,.55); border-radius:22px; padding:38px 40px 34px; box-shadow:0 40px 90px rgba(0,0,0,.65), 0 0 60px rgba(146,124,255,.28); animation:mrise .38s cubic-bezier(.2,.8,.25,1)}
.modal-card::before{content:""; position:absolute; top:0; left:26px; right:26px; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.modal-x{position:absolute; top:10px; right:14px; background:none; border:none; color:var(--muted); font-size:28px; line-height:1; cursor:pointer; padding:6px; z-index:2}
.modal-x:hover{color:var(--gold2)}
.modal .join-sub{text-align:center; margin-bottom:22px}
.modal .orn{margin-bottom:14px}
.modal-thanks{text-align:center; padding:18px 0 8px}
.modal-thanks .join-cta{margin-top:10px}
body.locked{overflow:hidden}
@keyframes mfade{from{opacity:0}}
@keyframes mrise{from{opacity:0; transform:translate(-50%,-45%) scale(.965)}}
@media (max-width:640px){
  .join-band{flex-direction:column; text-align:center; gap:18px; padding:26px 8px}
  .join-band .join-h,.join-band .join-sub{text-align:center}
  .modal-card{padding:32px 22px 28px}
  .pcorner{top:16px; right:16px}
}
.jconsent{text-align:center; font-size:11.5px; line-height:1.55; color:var(--muted); opacity:.75; margin-top:2px}