/* NOIR Familia | The Inner Circle V13
   Dedicated PUBLIC login portal. No private app styles, scripts or fonts loaded.
   Responsive desktop cinematic hall + floating member card + mobile stage.
*/
:root{
 color-scheme:dark;
 --void:#080408; --black:#0c050b; --wine:#220b1b; --rose:#ea3e71;
 --rose-bright:#ff6695; --silver:#f9edf0; --muted:#c8acba;
 --border:#804159; --gold:#c8a0a2;
}
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;background:var(--void);scroll-behavior:smooth}
body{
 margin:0;min-width:320px;min-height:100vh;min-height:100dvh;
 color:var(--silver);background:var(--black);
 font:14px/1.65 "Segoe UI",Tahoma,Arial,sans-serif;-webkit-font-smoothing:antialiased
}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:wait}
button:focus-visible,input:focus-visible{outline:2px solid #ffc1d5;outline-offset:3px}
[hidden]{display:none!important}
::selection{background:#b63365;color:#fff}
.gate{
 min-height:100vh;min-height:100dvh;display:grid;
 grid-template-columns:minmax(0,1.12fr) minmax(430px,.88fr);
 overflow:hidden;isolation:isolate
}
/* Left: Gothic ceremonial arrival */
.gate-visual{
 position:relative;isolation:isolate;display:flex;flex-direction:column;
 align-items:stretch;justify-content:center;
 min-height:100vh;min-height:100dvh;overflow:hidden;
 background:#1b0712;border-right:1px solid #a04b65;
 box-shadow:inset -11px 0 28px #020002c9
}
.gate-visual-bg{
 position:absolute;z-index:-3;inset:-2%;
 background-image:url("/assets/images/hero-desktop.webp");
 background-repeat:no-repeat;
 background-position:86% 48%;
 background-size:cover;
 filter:brightness(.61) saturate(.95) contrast(1.15);
 transform:scale(1.04)
}
.gate-visual-vignette{
 position:absolute;z-index:-2;inset:0;
 background:
  radial-gradient(ellipse 65% 56% at 49% 50%,#08040bce 0%,#0b0611b8 40%,transparent 91%),
  linear-gradient(90deg,#0a040cb9 0%,#10020a42 65%,#0902088b 100%),
  linear-gradient(0deg,#030102dc 0%,transparent 26%,transparent 78%,#04020787 100%)
}
.gate-visual::after{
 content:"";position:absolute;inset:15px;border:1px solid #ef9ead4f;
 pointer-events:none;box-shadow:inset 0 0 0 3px #0b010987;z-index:0
}
.gate-visual::before{
 content:"";position:absolute;inset:25px;pointer-events:none;z-index:0;
 border:1px solid #d2668b1c
}
.gate-corners{position:absolute;inset:17px;pointer-events:none;z-index:1}
.gate-corners i{width:63px;height:63px;position:absolute;border-color:#da849f;opacity:.73}
.gate-corners i:nth-child(1){top:0;left:0;border-top:2px solid;border-left:2px solid}
.gate-corners i:nth-child(2){top:0;right:0;border-top:2px solid;border-right:2px solid}
.gate-corners i:nth-child(3){bottom:0;left:0;border-bottom:2px solid;border-left:2px solid}
.gate-corners i:nth-child(4){bottom:0;right:0;border-bottom:2px solid;border-right:2px solid}
.gate-visual-head{
 position:absolute;top:39px;left:51px;right:50px;display:flex;align-items:center;
 gap:14px;font-size:10px;letter-spacing:3.1px;color:#ffdeeb;
 text-shadow:0 2px 7px #070006;z-index:2
}
.gate-visual-head b{font-size:11px;color:#fb6d9d;margin:0 7px}
.gate-tiny-crest{
 display:grid;place-items:center;width:36px;height:36px;flex:none;
 border:1px solid #b47691;border-radius:50%;
 background:#1c0516b8;color:#fba9c4;font:20px Georgia,serif
}
.gate-visual-inner{
 position:relative;z-index:2;width:100%;max-width:860px;
 padding:104px clamp(45px,8vw,132px) 133px;
 text-align:center;margin:auto
}
.gate-title-ornament{
 display:flex;gap:17px;align-items:center;justify-content:center;
 margin-bottom:25px;color:#ff9ebb;font:26px Georgia,serif;
 text-shadow:0 0 15px #ef477d
}
.gate-title-ornament span{width:66px;height:1px;background:linear-gradient(90deg,transparent,#d594a9)}
.gate-title-ornament span:last-child{transform:rotate(180deg)}
.gate-kicker{
 margin:0 0 13px;color:#ffbdd0;
 font:700 10px/1.8 Arial,sans-serif;letter-spacing:6px
}
.gate-visual h1{
 font:normal clamp(64px,6.6vw,116px)/.95 Georgia,"Times New Roman",serif;
 letter-spacing:-4.5px;margin:0;
 text-shadow:0 8px 15px #000f,0 0 35px #050007;
 text-wrap:balance
}
.gate-visual h1 em{
 display:block;color:var(--rose-bright);font-style:normal;
 text-shadow:0 4px 12px #000f,0 0 25px #ad2351b8;
 letter-spacing:.3px
}
.gate-motto{
 display:flex;align-items:center;justify-content:center;gap:20px;
 color:#ffe0ea;font-size:11px;font-weight:700;letter-spacing:5px;
 white-space:nowrap;margin-top:29px;
 text-shadow:0 2px 10px #000
}
.gate-motto span{width:39px;height:1px;flex:0 0 39px;background:linear-gradient(90deg,transparent,#f8b3cb9e)}
.gate-motto span:last-child{transform:rotate(180deg)}
.gate-visual-description{
 max-width:520px;margin:28px auto 35px;font-size:14px;line-height:1.95;
 color:#efdee5;text-shadow:0 2px 6px #000f
}
.gate-highlights{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
 padding-top:29px;border-top:1px solid #b979924a
}
.gate-highlights>div{display:flex;align-items:center;flex-direction:column;gap:3px}
.gate-highlights>div>span{
 color:#fa96b4;font:27px Georgia,serif;margin-bottom:5px;
 text-shadow:0 0 16px #e83e78bf
}
.gate-highlights strong,.gate-highlights small{
 display:block;font:700 9px/1.65 Arial,sans-serif;letter-spacing:1.4px;
 color:#ffe3ed
}
.gate-highlights small{color:#dab2c3;font-size:8px;font-weight:500}
.gate-visual-bottom{
 position:absolute;left:55px;right:55px;bottom:39px;z-index:2;
 display:flex;align-items:center;justify-content:space-between;
 font-size:8px;letter-spacing:2.8px;color:#ecb8cd
}
/* Right: narrow, carefully framed login chamber */
.gate-access{
 isolation:isolate;position:relative;
 display:grid;place-items:center;padding:60px clamp(20px,3vw,70px) 28px;
 background:
  radial-gradient(ellipse 105% 50% at 50% 4%,#5f123650,transparent 68%),
  linear-gradient(160deg,#180911,#090509 58%,#10060c);
 min-width:0
}
.gate-access-glow{
 pointer-events:none;position:absolute;z-index:-1;inset:0;
 background:
  linear-gradient(90deg,#f32a6a0a 0,transparent 25%),
  radial-gradient(ellipse 60% 35% at 50% 100%,#880f3150,transparent)
}
.gate-access-inner{width:100%;max-width:514px;min-width:0}
.gate-card{
 position:relative;isolation:isolate;
 padding:clamp(26px,3.1vw,42px) clamp(22px,3vw,40px) 27px;
 border:1px solid #97566b;border-radius:9px;
 background:
  radial-gradient(ellipse 65% 23% at 50% 0%,#5c193f51,transparent 93%),
  linear-gradient(154deg,#190910f7,#0e060cfb 70%,#180916f6);
 box-shadow:
  0 28px 72px #000b,0 0 24px #7d193833,
  inset 0 0 0 1px #fbc6d113,inset 0 0 70px #f3347211
}
.gate-card::before{
 content:"";position:absolute;inset:8px;border:1px solid #d8a2b12c;
 border-radius:5px;pointer-events:none;z-index:-1
}
.gate-card::after{
 content:"✦";position:absolute;top:18px;right:23px;
 color:#d493ac;font:17px Georgia,serif;opacity:.7;pointer-events:none
}
.gate-card-crest{
 position:relative;width:95px;height:95px;margin:-5px auto 14px;
 display:grid;place-items:center;
 border-radius:50%;background:#0d050dd0;
 border:1px solid #b86d88;box-shadow:0 0 26px #da285760,inset 0 0 0 3px #ffdbe314;
 overflow:hidden
}
.gate-card-crest::after{content:"";position:absolute;inset:5px;border:1px solid #f3bfcc7a;border-radius:50%;pointer-events:none}
.gate-card-crest img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.92) saturate(1.1)}
.gate-eyebrow{
 text-align:center;margin:0 0 13px;
 color:#ed99b5;font:700 9px/1.5 Arial,sans-serif;letter-spacing:2.3px
}
.gate-access h2{
 text-align:center;color:#faecf1;font:normal clamp(30px,2.6vw,43px)/1.08 Georgia,serif;
 margin:0 0 14px;letter-spacing:-1px
}
.gate-access h2 em{font-style:italic;color:#ff598c}
.gate-copy{
 text-align:center;margin:0 auto 25px;max-width:370px;
 color:#cdb3bd;font-size:12px;line-height:1.7
}
.gate-tabs{
 display:grid;grid-template-columns:1fr 1fr;gap:0;
 border-bottom:1px solid #79344d;margin-bottom:22px
}
.gate-tabs button{
 min-height:49px;padding:10px 6px;letter-spacing:1.35px;
 font:700 10px Arial,sans-serif;color:#bc96a8;
 border:0;border-bottom:3px solid transparent;background:#0e050c;
 transition:background .18s,color .18s
}
.gate-tabs button[aria-selected=true]{
 color:#ffe9f1;border-bottom-color:#ff427d;
 background:linear-gradient(180deg,#4a122c95,#310c24dd)
}
.gate-tabs button:hover{color:#fff}
.gate-tab-panel{animation:gate-reveal .2s ease-out}
@keyframes gate-reveal{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:none}}
.gate-tab-panel form{display:flex;flex-direction:column}
.gate-tab-panel label{
 display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;
 color:#f8c9d9;font:700 10px/1.6 Arial,sans-serif;
 letter-spacing:1.8px;margin-bottom:8px
}
.field-note{font:400 10px Arial,sans-serif;letter-spacing:.1px;color:#b58b9c}
.gate-input-wrap{position:relative;margin-bottom:17px}
.gate-field{
 display:block;width:100%;height:48px;padding:11px 71px 11px 42px;
 color:#fff0f5;outline:0;
 border:1px solid #7d495d;border-radius:5px;
 background:#0c060dc4;
 box-shadow:inset 0 0 15px #130612;
 font-size:13px;letter-spacing:.15px;
 transition:border-color .15s,box-shadow .15s
}
.gate-field::placeholder{color:#977887}
.gate-field:focus{border-color:#ff98b7;box-shadow:0 0 0 3px #ff4c8126}
.gate-field-icon{
 position:absolute;top:0;bottom:0;left:0;
 width:42px;display:grid;place-items:center;
 color:#d592aa;font:17px Georgia,serif;pointer-events:none
}
.gate-password-toggle{
 position:absolute;top:5px;right:5px;bottom:5px;padding:0 9px;
 color:#dfb5c5;background:#21101bd2;border:1px solid transparent;
 border-radius:4px;font:700 9px Arial,sans-serif;letter-spacing:.7px;
 transition:background .18s
}
.gate-password-toggle:hover{background:#4c1a32;color:#fff}
.gate-submit{
 position:relative;overflow:hidden;
 margin-top:6px;display:flex;justify-content:space-between;align-items:center;
 gap:15px;min-height:53px;padding:10px 19px;
 border:1px solid #f7779d;border-radius:5px;
 background:linear-gradient(105deg,#9e173f 0%,#6b1537 60%,#9b1b48 100%);
 box-shadow:0 0 20px #ec2a5f37,inset 0 0 0 1px #ffe3ea17;
 color:#fff0f5;letter-spacing:1.8px;font:700 10px Arial,sans-serif;
 transition:transform .18s,filter .18s,box-shadow .18s
}
.gate-submit::after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(125deg,#ffeaf31c,transparent 35%,transparent 80%,#fff2f311)
}
.gate-submit:hover{filter:brightness(1.14);transform:translateY(-1px);box-shadow:0 0 25px #ea30615e}
.gate-submit:disabled{opacity:.6;cursor:wait;transform:none}
.gate-arrow{font:22px Georgia,serif}
.gate-footnote{
 margin:17px 0 0;text-align:center;
 font-size:11px;line-height:1.6;color:#bea0ac
}
.gate-footnote>span{color:#f47ba3}
.gate-footnote strong{color:#ffd1e0}
.gate-status{
 margin:0;min-height:0;line-height:1.55;
 font-size:12px;color:#ffdaea;overflow-wrap:anywhere
}
.gate-status:not(:empty){margin-top:17px;padding:12px 14px;border:1px solid #90536c;border-radius:5px;background:#2f1324}
.gate-status[data-state=error]{background:#441020;border-color:#e3698c;color:#ffcfde}
.gate-status[data-state=success]{background:#143726;border-color:#629c7e;color:#d2ffe0}
.gate-card-end{
 display:flex;gap:17px;align-items:center;justify-content:center;
 color:#d9a7b9;font:700 9px Arial,sans-serif;
 letter-spacing:2.4px;margin-top:27px;white-space:nowrap
}
.gate-card-end span{height:1px;flex:1;background:linear-gradient(90deg,transparent,#c3849a88)}
.gate-card-end span:last-child{transform:rotate(180deg)}
.gate-access-bottom{
 display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
 margin:19px 6px 0;color:#9a7184;letter-spacing:1.6px;font:700 8px/1.5 Arial,sans-serif
}
.gate-mobile-brand{display:none}
/* Narrow desktop / tablet: preserve a form that never becomes clipped */
@media(max-width:1180px){
 .gate{grid-template-columns:minmax(0,1fr) minmax(410px,.9fr)}
 .gate-visual-inner{padding-left:40px;padding-right:40px}
 .gate-visual h1{font-size:clamp(52px,5.8vw,80px)}
 .gate-visual-description{font-size:12px}
 .gate-visual-head{left:38px;right:38px;letter-spacing:2px}
 .gate-highlights{gap:8px}
 .gate-highlights strong,.gate-highlights small{letter-spacing:.5px}
 .gate-access{padding:28px 21px}
}
/* Mobile: stage first; member card overlaps hero with no loss of functionality. */
@media(max-width:900px){
 .gate{display:flex;flex-direction:column;overflow:visible}
 .gate-visual{
  min-height:390px;height:390px;border-right:0;border-bottom:1px solid #913f5c;
  justify-content:flex-start;box-shadow:inset 0 -30px 40px #070408
 }
 .gate-visual-bg{
  background-image:url("/assets/images/hero-mobile.webp");
  background-size:cover;background-position:center 30%;
  filter:brightness(.64) contrast(1.18)
 }
 .gate-visual-vignette{
  background:linear-gradient(180deg,#0b040a42 0%,#10040b9c 45%,#080309e8 100%),
  radial-gradient(circle at 50% 32%,#1805178c,transparent 75%)
 }
 .gate-visual::after{inset:8px}
 .gate-visual::before{inset:14px}
 .gate-corners{inset:10px}
 .gate-corners i{width:28px;height:28px}
 .gate-visual-head{display:none}
 .gate-mobile-brand{
  display:flex;gap:11px;align-items:center;
  width:100%;max-width:580px;margin:0 auto 13px;
  color:#ffebf1;font:700 10px/1.2 Arial,sans-serif;letter-spacing:2.3px
 }
 .gate-mobile-brand small{display:block;color:#dc9bb2;font:700 8px/1.7 Arial,sans-serif;letter-spacing:1.1px;margin-top:3px}
 .gate-brand-monogram{font:italic 29px Georgia,serif;color:#ffe6ee}
 .gate-brand-monogram em{color:#f5447f}
 .gate-visual-inner{
  padding:51px 26px 55px;max-width:640px;margin:auto
 }
 .gate-title-ornament{font-size:19px;margin-bottom:8px}
 .gate-kicker{font-size:8px;letter-spacing:3px;margin-bottom:8px}
 .gate-visual h1{font-size:clamp(46px,8.8vw,69px);letter-spacing:-2px}
 .gate-motto{margin-top:13px;font-size:9px;letter-spacing:2.8px;gap:11px}
 .gate-motto span{width:24px;flex-basis:24px}
 .gate-visual-description{font-size:11px;line-height:1.65;max-width:400px;margin:18px auto 12px}
 .gate-highlights,.gate-visual-bottom{display:none}
 .gate-access{
  display:block;min-height:0;
  margin:0;padding:0 16px 40px;background:linear-gradient(180deg,#10060e,#09050a)
 }
 .gate-access-inner{max-width:580px;margin:-42px auto 0;position:relative;z-index:2}
 .gate-card{padding:24px clamp(18px,5vw,36px) 21px}
 .gate-card-crest{width:84px;height:84px;margin:0 auto 10px}
 .gate-eyebrow{font-size:8px;margin-bottom:10px}
 .gate-access h2{font-size:clamp(30px,5.5vw,39px)}
 .gate-copy{font-size:11px;margin:0 auto 19px}
 .gate-access-bottom{margin:17px 9px 0}
}
@media(max-width:420px){
 .gate-visual{height:340px;min-height:340px}
 .gate-visual-inner{padding:47px 16px 38px}
 .gate-visual h1{font-size:43px}
 .gate-visual-description{font-size:10px;margin:13px auto}
 .gate-motto{font-size:8px;letter-spacing:2px;white-space:normal}
 .gate-access{padding:0 9px 28px}
 .gate-access-inner{margin-top:-34px}
 .gate-card{padding:18px 15px 20px}
 .gate-card-crest{width:72px;height:72px}
 .gate-access h2{font-size:30px}
 .gate-copy{font-size:10px}
 .gate-tabs button{font-size:9px;letter-spacing:.8px}
 .gate-tab-panel label{font-size:9px;letter-spacing:1.2px}
 .gate-field{height:45px;font-size:12px}
 .gate-card-end{font-size:8px;letter-spacing:1.5px}
 .gate-access-bottom{font-size:7px;letter-spacing:.8px}
}
@media(max-width:360px){
 .gate-visual h1{font-size:37px}
 .gate-visual-description{font-size:10px}
 .gate-title-ornament{margin-top:8px}
 .gate-visual-inner{padding-left:10px;padding-right:10px}
 .gate-highlights{display:none}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .gate-tab-panel{animation:none!important}
 .gate-field,.gate-submit,.gate-tabs button,.gate-password-toggle{transition:none!important}
 .gate-submit:hover{transform:none}
}


/* Discord-backed private invitations — visible only when the integration is configured. */
.discord-verification{
 margin:0 0 25px;padding:17px 19px 19px;border:1px solid #aa6078;
 background:linear-gradient(135deg,#37142a,#170811);
 border-radius:8px;box-shadow:inset 0 0 35px #ff3d7512;
}
.discord-verification .gate-eyebrow{margin:0 0 9px;text-align:left;letter-spacing:1.5px}
.discord-verification>p:not(.gate-eyebrow){
 margin:0 0 13px;font-size:12px;line-height:1.75;color:#e4c5d1
}
.discord-verify-link{
 display:flex;align-items:center;justify-content:center;min-height:44px;
 padding:10px 14px;text-align:center;text-decoration:none;
 border-radius:5px;border:1px solid #cc7695;
 color:#ffe8f0;background:linear-gradient(100deg,#792045,#a52356);
 font:700 10px Arial,sans-serif;letter-spacing:1.3px;
 transition:background .15s,box-shadow .15s;
}
.discord-verify-link:hover{background:#b22f63;box-shadow:0 0 17px #dc428957}
.discord-verify-link:focus-visible{outline:2px solid #ffd0e0;outline-offset:3px}
.discord-verification .discord-verified-name{
 color:#d6ffe6;font-weight:700;letter-spacing:.3px;margin:11px 0 0;
 overflow-wrap:anywhere
}
.gate-field[readonly]{border-color:#3d815d;color:#d7f8e1;background:#13271e}
@media(max-width:420px){.discord-verification{padding:13px}.discord-verify-link{font-size:9px}}
@media(prefers-reduced-motion:reduce){.discord-verify-link{transition:none}}