/* SouthSide's own sunset, with the clear, image-led hierarchy of a roleplay landing page. */
:root{--accent:#d9b5ff;--accent-bright:#f3dcff;--glass-border:#f5d9ff59;--glass-fill:rgba(58,36,70,.72)}
body.ss-site{background:#281b37;color:#fff8ff;background-image:linear-gradient(180deg,#4e3452c7 0%,#45304fd1 55%,#281b37e8 100%),url('/assets/southside-sunset.png');background-size:cover;background-position:center;background-attachment:fixed}
body.ss-site:before{background:linear-gradient(180deg,#3a28481f,#2c1b3990)}
.ss-site .ss-header{width:min(1480px,calc(100% - 40px));top:12px;margin:12px auto 0;padding:12px 20px!important;background:#392b4dc9!important;border-color:#f4daff69;border-radius:21px;box-shadow:0 12px 35px #1e102c38, inset 0 1px #ffffff42;backdrop-filter:blur(23px) saturate(130%)}
.ss-site .brand-word{font-weight:800;letter-spacing:-.04em;color:#fff}.ss-site .brand-word small{color:#f2dfff}
.ss-site .ss-nav{gap:6px}.ss-site .ss-nav a{padding:10px 14px!important;border:1px solid #f0dfff34!important;border-radius:11px!important;background:#ffffff0d!important;color:#f8edff;font-weight:650}
.ss-site .ss-nav a:hover,.ss-site .ss-nav a:focus-visible{background:#e0bdff2e!important;border-color:#f0dfff9c!important;color:#fff!important}
.ss-site .ss-nav .nav-admin{margin-left:3px;background:#d8adff2b!important;border-color:#efcfff86!important;color:#fff!important}
.ss-site .ss-hero{height:min(840px,calc(100svh - 40px));min-height:650px;max-height:none;display:flex!important;align-items:center;justify-content:center!important;padding:105px 24px 130px!important;background:url('/assets/southside-sunset.png') center 52%/cover no-repeat!important;overflow:hidden;isolation:isolate}
.ss-site .ss-hero:before{content:'';display:block!important;position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,#27173197,#2717318a,#27173197),linear-gradient(0deg,#2b1c39 0%,#28192916 28%,#27173118 72%,#2717318a 100%)!important}
.ss-site .ss-hero:after{content:'';display:block!important;position:absolute;inset:auto 0 0;z-index:0;height:165px;background:linear-gradient(0deg,#392648,transparent)!important}
.ss-site .ss-hero-content{position:relative;z-index:1;flex:0 1 950px;width:min(950px,100%);max-width:950px!important;margin:0 auto!important;padding:0!important;text-align:center!important;background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.ss-site .hero-kicker{margin:0 0 26px!important;padding:9px 16px;background:#68477ca3;border:1px solid #f7dcff8c;border-radius:999px;color:#fff4ff;font-size:11px!important;letter-spacing:.17em!important}
.ss-site .ss-hero h1{font-size:clamp(48px,6vw,90px)!important;line-height:1.07!important;letter-spacing:-.055em!important;max-width:none;margin:0 auto 22px!important;text-shadow:0 5px 22px #25152a8c}
.ss-site .ss-hero #site-hero-accent{color:#f0c6ff!important;-webkit-text-fill-color:#f0c6ff!important}
.ss-site .hero-lede{margin:0 auto 30px!important;max-width:640px;color:#fff7ff!important;font-size:clamp(16px,1.45vw,20px)!important;line-height:1.65!important;text-shadow:0 2px 14px #201024a6}
.ss-site .hero-actions{justify-content:center!important;gap:12px}.ss-site .hero-actions .button{min-height:54px;padding:14px 26px!important;border-radius:13px!important;background:#493350c9!important;border-color:#f5dcff82!important;font-size:14px;font-weight:750}.ss-site .hero-actions .button.primary{background:linear-gradient(115deg,#dfb3ff,#b987ef)!important;color:#2c1739!important;border:1px solid #f9e5ff!important;box-shadow:0 10px 30px #351a5770!important}.ss-site .hero-guide{align-self:center;margin:0 0 0 8px;color:#fff2ff;text-shadow:0 2px 9px #2b1838}
.ss-site .hero-caption{z-index:1;color:#f4daff}
.ss-site .live-strip{width:min(1220px,calc(100% - 48px));max-width:none;margin:-56px auto 30px;background:#604473e6!important;border:1px solid #ffe5ff8a;border-radius:22px;box-shadow:0 18px 38px #21132d45;backdrop-filter:blur(18px)}
.ss-site .live-item{padding:22px 28px;border-color:#ffe6ff4a}.ss-site .live-item small{color:#eed2ff;font-size:10px}.ss-site .live-item strong{font-size:27px}.ss-site .live-item span{color:#f0def5;font-size:12px}.ss-site .live-link{background:#ffffff11;color:#fff8ff;font-weight:700}
.ss-site .ss-section{max-width:1220px;padding:75px 0;border-color:#f3dfff61}.ss-site .section-heading{align-items:end}.ss-site .section-heading h2{font-size:clamp(30px,3.5vw,46px);color:#fff}.ss-site .section-heading>p{color:#f3e3f7}.ss-site .eyebrow{color:#f1ceff!important}
.ss-site :is(.start-card,.system-card,.faction-card,.partner-tile,.help-detail,.support-panel,.empty-state,.ss-page,.rule-category,.rule-intro-card,.launcher-card){background:linear-gradient(145deg,#81558dba,#5c3c6cd9)!important;border:1px solid #ffe3ff78!important;box-shadow:0 16px 38px #27163838,inset 0 1px #ffffff42!important;border-radius:22px!important;backdrop-filter:blur(13px)}
.ss-site :is(.start-card,.system-card,.faction-card):hover{background:linear-gradient(145deg,#8c6099e6,#684779ed)!important;border-color:#fff0ffb6!important;transform:translateY(-3px)!important}
.ss-site :is(.start-card,.system-card,.faction-card) p,.ss-site .empty-state{color:#fff0ff}.ss-site .step-label{background:#ffffff25;color:#fff;border-color:#ffffff82}.ss-site .text-link{color:#ffe2ff}.ss-site .support-panel{background:linear-gradient(120deg,#946197dd,#604276e8)!important}.ss-site .ss-footer{background:#50365fde!important;border-color:#f6dcff70;box-shadow:0 15px 35px #21122833}.ss-site .launcher-address,.ss-site .rule-search input{background:#3e2a50a8;color:#fff;border-color:#f6dfff89}
@media(max-width:1100px){.ss-site .ss-header{gap:12px}.ss-site .ss-nav{flex-wrap:wrap;justify-content:center}.ss-site .ss-nav a{font-size:11px;padding:8px 10px!important}}
@media(max-width:760px){body.ss-site{background-attachment:scroll}.ss-site .ss-header{width:calc(100% - 24px);margin:12px auto 0;top:10px;padding:10px 13px!important}.ss-site .ss-nav.is-open{display:flex!important;flex-direction:column;align-items:stretch;background:#513561ed;padding:12px;border-radius:16px}.ss-site .ss-nav a{width:100%}.ss-site .ss-hero{height:auto;min-height:690px;padding:84px 22px 112px!important;background-position:48% center!important}.ss-site .ss-hero h1{font-size:clamp(41px,10vw,57px)!important;letter-spacing:-.05em!important}.ss-site .hero-lede{font-size:15px!important}.ss-site .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}.ss-site .hero-actions .button{width:100%}.ss-site .hero-guide{margin:8px auto 0}.ss-site .live-strip{width:calc(100% - 28px);margin:-45px auto 0}.ss-site .live-item{min-width:50%;padding:18px}.ss-site .ss-section{margin:0 16px;padding:52px 0}.ss-site .ss-footer{width:calc(100% - 28px);margin:20px auto}.ss-site .section-heading{align-items:start}}
@media(max-width:480px){.ss-site .live-item{min-width:100%;border-right:0;border-bottom:1px solid #ffe6ff45}.ss-site .hero-caption{display:none}.ss-site .ss-hero{min-height:650px}.ss-site .ss-hero h1{font-size:40px!important}}

/* Clear gaps between topics; opaque lilac surfaces render faster than nested glass blur. */
.ss-site .ss-header{width:100%!important;max-width:none!important;top:0!important;margin:0!important;border-radius:0!important;background:#241930f5!important;border:0!important;border-bottom:1px solid #bd98d474!important;box-shadow:0 8px 28px #11091b68!important;padding:10px clamp(18px,3vw,54px)!important}
.ss-site .ss-nav a{background:#382649!important;border-color:#916fb270!important;border-radius:9px!important}.ss-site .ss-nav a:hover,.ss-site .ss-nav a:focus-visible{background:#614077!important;border-color:#d2aceb!important}.ss-site .ss-nav .nav-admin{background:#674285!important;border-color:#c8a2e5!important}
@media(max-width:760px){.ss-site .ss-header{padding:10px 14px!important}.ss-site .ss-nav.is-open{background:#241930f7!important}}
body.ss-site{background-attachment:scroll}
.ss-site .ss-section{margin:24px auto 0;padding:54px 34px!important;background:#4d345eb8;border:1px solid #f2d7ff72;border-radius:26px;box-shadow:0 16px 32px #24152c29}
.ss-site :is(.start-card,.system-card,.faction-card,.partner-tile,.help-detail,.support-panel,.empty-state,.rule-category,.rule-intro-card,.launcher-card){background:#694777ee!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-color:#ffe5ff90!important}
.ss-site .start-grid,.ss-site .system-grid,.ss-site .faction-grid,.ss-site .partner-grid{gap:20px}
.ss-site .start-card .text-link+.text-link{display:block;margin-top:10px}
.ss-site .live-strip,.ss-site .ss-footer{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
@media(max-width:760px){.ss-site .ss-section{margin:18px 14px 0!important;padding:35px 20px!important}}