/* Kingdom West Roleplay */
:root{--night:#17110c;--vellum:#e9dcbe;--ink:#2a1c10;--ink-soft:#5b4630;--rubric:#9a2a17;--rule:rgba(42,28,16,.3)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--night:#0f0b08}}
:root[data-theme="dark"]{--night:#0f0b08}
*{box-sizing:border-box}
html{min-height:100%;background-color:var(--night)}
body{margin:0;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:24px 16px;background-color:var(--night);background-image:radial-gradient(ellipse 900px 700px at 50% 180px,#3a2a1c 0%,#241a12 45%,var(--night) 100%);background-repeat:no-repeat;font-family:'Alegreya',Georgia,'Times New Roman',serif;color:var(--ink);font-variant-numeric:oldstyle-nums}
.sheet{position:relative;width:min(600px,100%);padding:52px 44px 40px;text-align:center;background-color:var(--vellum);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.12 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(ellipse at 50% 30%,rgba(255,249,232,.65),rgba(255,249,232,0) 70%),linear-gradient(90deg,rgba(120,88,48,.25),rgba(120,88,48,0) 14%,rgba(120,88,48,0) 86%,rgba(120,88,48,.25));border:1px solid var(--ink-soft);box-shadow:inset 0 0 0 6px var(--vellum),inset 0 0 0 7px var(--rule),0 24px 60px rgba(0,0,0,.6)}
.page{width:min(600px,100%);display:grid;justify-items:center;position:relative;z-index:1;min-width:0}
.logo{margin:0 0 -28px;position:relative;z-index:1;line-height:0}
.logo img{width:min(440px,86vw);height:auto;filter:drop-shadow(0 14px 28px rgba(0,0,0,.7));animation:rise 1.6s cubic-bezier(.2,.7,.2,1) both}
.tagline{margin:0;font-family:'Alegreya SC',Georgia,serif;font-weight:500;font-size:15px;letter-spacing:.1em;color:var(--ink-soft)}
.divider{display:flex;align-items:center;gap:12px;margin:22px auto;width:70%}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--rule)}
.divider span{width:8px;height:8px;background:var(--rubric);transform:rotate(45deg)}
.status{margin:0;font-size:clamp(26px,6vw,34px);color:var(--rubric)}
.contact{margin:18px 0 0;font-size:18px;line-height:1.55;overflow-wrap:anywhere}
.contact a{color:var(--rubric);text-decoration:none;border-bottom:1px solid currentColor}
.contact a:hover{color:var(--ink)}
.intro{margin:14px auto 0;max-width:440px;font-size:17px;line-height:1.55;color:var(--ink-soft)}
.lore,.about,.expectations,.join{margin:26px 0 0;text-align:left}
.lore p,.about p,.expectations p,.join p{margin:0 0 12px;font-size:16px;line-height:1.6;hyphens:auto}
.lore p{text-align:justify}
.lore p:first-of-type::first-letter{float:left;margin:4px 6px 0 0;font-size:3.1em;line-height:.8;color:var(--rubric);font-weight:600}
.features{margin:26px 0 4px;text-align:left}
.features ul{margin:0;padding:0;list-style:none}
.features li{position:relative;padding:0 0 9px 20px;font-size:16px;line-height:1.5}
.features li::before{content:"";position:absolute;left:3px;top:.62em;width:6px;height:6px;background:var(--rubric);transform:rotate(45deg)}
.features strong{font-weight:600}
.join .cta,.cta{margin:16px 0 0;text-align:center;font-size:18px;font-weight:600;color:var(--rubric)}
.legal{margin:26px 0 0;max-width:520px;text-align:center;font-size:13px;line-height:1.5;color:rgba(233,220,190,.55);animation:fade 1.4s 1s ease both}
.logo::before{content:"";position:absolute;left:50%;top:48%;width:120%;height:110%;z-index:-1;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(255,170,70,.42),rgba(255,140,40,.12) 45%,rgba(255,140,40,0) 68%);animation:candle 4.2s ease-in-out infinite;pointer-events:none}
@keyframes candle{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}23%{opacity:1;transform:translate(-50%,-50%) scale(1.03)}41%{opacity:.75;transform:translate(-50%,-50%) scale(.99)}67%{opacity:.95;transform:translate(-50%,-50%) scale(1.02)}}
.sheet{animation:rise 1.6s .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
#embers{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.page h2{display:flex;align-items:center;justify-content:center;gap:12px;margin:38px 0 16px;font-family:'Alegreya SC',Georgia,serif;font-weight:500;font-size:clamp(21px,4.6vw,26px);letter-spacing:.07em;line-height:1.2;color:var(--rubric);text-align:center;overflow-wrap:anywhere}
.page h2::before,.page h2::after{content:"\25C6";flex:1;min-width:24px;font-size:12px;line-height:1;color:var(--rubric)}
.page h2::before{text-align:right;background:linear-gradient(90deg,transparent,var(--rubric) 70%,var(--rubric) calc(100% - 14px),transparent calc(100% - 14px)) center/100% 1px no-repeat}
.page h2::after{text-align:left;background:linear-gradient(90deg,transparent 14px,var(--rubric) 14px,var(--rubric) 30%,transparent) center/100% 1px no-repeat}
.page h2:first-child{margin-top:8px}
.mail-reveal{padding:3px 12px;font:inherit;font-size:.95em;color:#f5ead2;background:var(--rubric);border:1px solid var(--ink);border-radius:2px;cursor:pointer}
.mail-reveal:hover{background:#7c2112}
.language-switch{display:flex;justify-content:center;gap:8px;margin:0 0 24px}
.language-switch[hidden]{display:none}
.language-switch button{min-width:48px;min-height:44px;padding:8px 12px;font:600 15px 'Alegreya SC',Georgia,serif;letter-spacing:.06em;color:var(--rubric);border:1px solid var(--rule);border-radius:2px;background:transparent;cursor:pointer}
.language-switch button:hover{background:rgba(154,42,23,.08)}
.language-switch button[aria-pressed="true"]{color:var(--vellum);background:var(--rubric);border-color:var(--rubric)}
button:focus-visible,a:focus-visible{outline:2px solid var(--rubric);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.logo::before,.logo img,.sheet,.legal{animation:none}#embers{display:none}}
@media(max-width:480px){.sheet{padding:44px 22px 30px}.contact{font-size:16px}.page h2{gap:8px}.logo::before{width:100%}}