@font-face {
    font-family: Realm;
    src: url('../fonts/TrajanSansPro-Regular.otf') format('opentype');
    font-display: swap;
}
:root {
    color-scheme: dark;
    --page-ink: #07080d;
    --text: #f7eee8;
    --muted: #c3b2b4;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { position: relative; min-height: 100svh; margin: 0; background: var(--page-ink); color: var(--text); font-family: Arial, sans-serif; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
[hidden] { display: none !important; }
::selection { background: #ad3c50; color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent, #e6c49a); outline-offset: 6px; }
.portal-skip { position: fixed; top: 12px; left: 20px; z-index: 20; padding: 14px 20px; background: #e6c49a; color: #201813; font-size: 13px; transform: translateY(-160%); }
.portal-skip:focus { transform: translateY(0); }
.portal-header { position: absolute; inset: 0 0 auto; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 26px 4%; background: linear-gradient(#07080da0, transparent); }
.portal-brand { font: 16px Realm, Georgia, serif; letter-spacing: 3px; }
.portal-brand > span { color: #e5c49f; }
.portal-brand small { display: block; margin-top: 8px; color: #bcafb0; font: 8px Arial, sans-serif; letter-spacing: 4px; }
.portal-nav { display: flex; align-items: center; gap: 25px; }
.portal-nav a { position: relative; display: flex; align-items: center; gap: 11px; min-height: 44px; font-size: 11px; letter-spacing: 2px; transition: color .25s; }
.portal-nav a::after { content: ''; position: absolute; inset: auto 0 4px; height: 1px; background: #d4ac98; transform: scaleX(0); transition: transform .3s var(--ease-out); }
.portal-nav a:hover::after, .portal-nav a:focus-visible::after { transform: scaleX(1); }
.portal-nav span { color: #c2abaf; font-size: 9px; letter-spacing: 1px; }
.portal-nav i { width: 1px; height: 13px; background: #fff3; }
.portal-nav a:hover { color: #f3c8b0; }
.realms { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100svh; }
.realms:focus { outline: none; }
.portal-heading { position: absolute; inset: 82px 0 auto; z-index: 4; text-align: center; pointer-events: none; }
.portal-heading > span { color: #c3b2b2; font-size: 9px; letter-spacing: 4px; }
.portal-heading h1 { margin: 13px 0 12px; color: #f5eee5; font: 400 clamp(26px, 2.5vw, 42px)/1.3 Realm, Georgia, serif; letter-spacing: .8px; text-shadow: 0 4px 25px #000; }
.portal-heading em { color: #e2b99d; font-style: normal; }
.portal-heading__ornament { display: flex; align-items: center; justify-content: center; gap: 16px; color: #c7a18b; font-size: 7px; }
.portal-heading__ornament::before, .portal-heading__ornament::after { content: ''; width: 65px; height: 1px; background: linear-gradient(90deg, transparent, #b58d7270); }
.portal-heading__ornament::after { transform: rotate(180deg); }
.realm {
    --accent: #e5c197;
    --rgb: 204, 164, 114;
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 225px 8% 100px 30px; min-height: 930px;
    background: #0b111b; scroll-margin-top: 18px;
}
.realm--crow { --accent: #f0a5b7; --rgb: 207, 59, 90; justify-content: flex-start; padding: 225px 30px 100px 8%; background: #170a12; }
.realm:focus { outline: none; }
.realm:focus-visible::after { border-color: rgba(var(--rgb), .6); }
.realm__art { position: absolute; inset: 0; z-index: -4; background: url('../img/universe/backgrounds/realm-kael-moon-knight.webp') left 35% / auto 112% no-repeat; opacity: .95; filter: saturate(.8); transform-origin: 30% 40%; transition: transform 1.5s var(--ease-out); }
.realm--crow .realm__art { background-image: url('../img/universe/backgrounds/realm-crow-dark-elf.webp'); background-size: auto 112%; background-position: 65% 30%; transform-origin: 80% 40%; }
.realm::before { content: ''; position: absolute; inset: 0; z-index: -3; background: linear-gradient(180deg, #07080dc9, transparent 30%, #080b1450 60%, #07080d 100%), linear-gradient(90deg, #07080d15 5%, #0a0e1980 45%, #080b15e8 85%); }
.realm--crow::before { background: linear-gradient(180deg, #07080dc9, transparent 30%, #160a1270 60%, #07080d 100%), linear-gradient(90deg, #140a14e8 15%, #140a1480 60%, #140a1420); }
.realm::after { content: ''; position: absolute; inset: 20px 20px 80px; z-index: -1; pointer-events: none; border: 1px solid rgba(var(--rgb), .13); background: linear-gradient(var(--accent), var(--accent)) left top / 26px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) right bottom / 26px 1px no-repeat; opacity: .6; }
.realm__light { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: 0; background: radial-gradient(420px circle at var(--pointer-x, 50%) var(--pointer-y, 45%), rgba(var(--rgb), .12), transparent 75%); transition: opacity .8s; }
.realm--lit .realm__light { opacity: 1; }
.realm__content { position: relative; max-width: 375px; width: 100%; text-align: center; animation: realm-arrive .85s var(--ease-out) both; }
.realm--crow .realm__content { animation-delay: .12s; }
@keyframes realm-arrive { from { transform: translateY(12px); } to { transform: translateY(0); } }
.realm__index { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; color: var(--accent); font-size: 9px; letter-spacing: 2.5px; }
.realm__index i { width: 4px; height: 4px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 12px var(--accent); }
.realm__identity { position: relative; height: 165px; display: flex; align-items: center; justify-content: center; }
.realm__identity::before { content: ''; position: absolute; inset: 20% 8%; z-index: -1; background: rgba(var(--rgb), .12); filter: blur(35px); }
.realm__identity picture { display: flex; align-items: center; justify-content: center; width: 100%; }
.realm__logo { display: block; width: 330px; max-width: 100%; height: 175px; object-fit: contain; filter: drop-shadow(0 8px 12px #000) drop-shadow(0 0 25px rgba(var(--rgb), .2)); }
.realm__logo--crow { width: 375px; }
.realm__tagline { margin: 16px 0 24px; color: #f0e5db; font: 19px/1.6 Realm, Georgia, serif; text-shadow: 0 2px 10px #000; }
.realm--crow .realm__tagline { color: #fae5eb; }
.realm__mode { color: var(--accent); font-weight: 400; }
.realm__mode-note { display: inline-block; font: 11px/1.6 Arial, sans-serif; letter-spacing: .4px; color: #e0ccce; }
.realm__opening { position: relative; width: 320px; max-width: 100%; margin: auto; padding: 19px 22px 15px; border: 1px solid rgba(var(--rgb), .3); background: linear-gradient(135deg, rgba(var(--rgb), .07), #080b14c4); backdrop-filter: blur(10px); box-shadow: 0 20px 45px #0005; transition: border-color .4s, box-shadow .4s; }
.realm--crow .realm__opening { background: linear-gradient(135deg, rgba(var(--rgb), .09), #10090fc4); }
.realm__opening::before, .realm__opening::after { content: ''; position: absolute; width: 10px; height: 10px; border-style: solid; border-color: var(--accent); pointer-events: none; }
.realm__opening::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.realm__opening::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.realm__opening-label { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--accent); font-size: 9px; letter-spacing: 2.8px; }
.realm__opening-label i { width: 4px; height: 4px; background: var(--accent); transform: rotate(45deg); }
.realm__opening time { display: flex; align-items: center; justify-content: center; gap: 21px; margin-top: 11px; }
.realm__opening b { font: 400 78px/.95 Georgia, serif; letter-spacing: -3px; color: #eed1a9; }
@supports (background-clip: text) { .realm__opening b { background: linear-gradient(#fff6e9, #caa578); background-clip: text; -webkit-background-clip: text; color: transparent; } .realm--crow .realm__opening b { background-image: linear-gradient(#fff0f4, #d47590); } }
.realm__opening time > span { text-align: left; font-size: 15px; letter-spacing: 3px; }
.realm__opening small { display: block; margin-top: 10px; color: #c1abae; font-size: 9px; letter-spacing: 1.5px; }
.realm__launch-status { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 11px; color: #e5cbb4; font-size: 9px; letter-spacing: 1.4px; }
.realm--crow .realm__launch-status { color: #edbbca; }
.realm__launch-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(var(--rgb), .5); }
.realm__opening p { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid #ffffff12; color: #c7b7b4; font-size: 10px; line-height: 1.5; letter-spacing: .2px; }
.realm__details { display: flex; justify-content: center; flex-wrap: wrap; margin: 16px 0; color: #d4c5c6; }
.realm__details > span { padding: 5px 10px; border-right: 1px solid #ffffff25; font-size: 10px; letter-spacing: .7px; }
.realm__details > span:last-child { border: 0; }
.realm__details b { color: var(--accent); font-weight: 400; }
.realm__details .realm__unique { color: var(--accent); background: rgba(var(--rgb), .08); }
.realm__cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; width: 320px; max-width: 100%; min-height: 60px; margin: auto; padding: 18px 25px; border: 1px solid #edc89b; background: linear-gradient(110deg, #bd9367, #eccaa7 55%, #c59568); color: #281c14; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 2.2px; box-shadow: 0 10px 35px #0007, inset 0 1px #fff5; transition: transform .3s var(--ease-out), box-shadow .3s; }
.realm--crow .realm__cta { border-color: #d36a85; background: linear-gradient(110deg, #96233d, #b33c5b 55%, #872139); color: #fff0f4; }
.realm__cta span { font-size: 23px; line-height: 1; transition: transform .3s var(--ease-out); }
.realm__cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent, #fff3, transparent); transform: translateX(-110%); transition: transform .7s; }
.realm__cta:focus-visible { box-shadow: 0 10px 40px rgba(var(--rgb), .25); }
.realm__cta--pending { opacity: .6; }
.realm__links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 17px; margin-top: 11px; min-height: 44px; }
.realm__links a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: #d0bec0; font-size: 12px; transition: color .25s; }
.realm__links svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.realm__links a:first-child:not(:last-child) svg { fill: currentColor; stroke: none; }
.realm__links a:hover { color: #fff; }
.realm__side-label { position: absolute; left: 36px; top: 45%; writing-mode: vertical-rl; transform: rotate(180deg); color: #e1ccbb80; font-size: 8px; letter-spacing: 4px; }
.realm--crow .realm__side-label { left: auto; right: 36px; transform: none; }
.realm__watermark { position: absolute; left: 35px; bottom: 35px; z-index: -1; color: rgba(var(--rgb), .04); font: clamp(70px, 9vw, 160px)/1 Realm, Georgia, serif; letter-spacing: 12px; }
.realm--crow .realm__watermark { left: auto; right: 35px; }
.realm__embers { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; mask-image: linear-gradient(transparent 15%, #0008 60%, transparent 95%); }
.realm__embers::before { content: ''; position: absolute; inset: -70px; opacity: .65; background-image: radial-gradient(circle, rgba(var(--rgb), .8) 0 1px, transparent 2px), radial-gradient(circle, rgba(var(--rgb), .4) 0 1px, transparent 2px); background-size: 187px 253px, 271px 337px; animation: realm-embers 18s linear infinite; }
.realm--crow .realm__embers::before { animation-delay: -9s; }
@keyframes realm-embers { 0% { transform: translate3d(0, 40px, 0); opacity: 0; } 15%, 80% { opacity: .65; } 100% { transform: translate3d(20px, -45px, 0); opacity: 0; } }
.realms__divider { position: absolute; top: 205px; bottom: 88px; left: 50%; width: 1px; z-index: 3; background: linear-gradient(transparent, #cfaa7d60, #d3678660, transparent); box-shadow: 0 0 20px #c7848540; pointer-events: none; }
.realms__divider span { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); display: grid; place-items: center; width: 40px; height: 66px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #100c12; color: #cfa88e; font: 21px Georgia, serif; }
.portal-footer { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; padding: 19px 4%; border-top: 1px solid #ffffff0b; color: #c0aaad; font-size: 8px; letter-spacing: 1.5px; }
.portal-footer > span:last-child { text-align: right; }
.portal-footer b { margin-left: 14px; color: #a08c91; font-weight: 400; }
body[data-effects='off'] .realm__embers, body[data-effects='off'] .realm__light { display: none; }
body[data-effects='off'] .realm__content { animation: none; }
body[data-effects='off'] .realm__art { transform: none !important; }
@media (hover: hover) and (pointer: fine) {
    .realm:hover .realm__art, .realm:focus-within .realm__art { transform: scale(1.025); }
    .realm:hover .realm__opening { border-color: rgba(var(--rgb), .45); box-shadow: 0 20px 45px #0005, 0 0 35px rgba(var(--rgb), .045); }
    a.realm__cta:hover { transform: translateY(-3px); box-shadow: 0 10px 40px rgba(var(--rgb), .25); }
    a.realm__cta:hover::before { transform: translateX(110%); }
    a.realm__cta:hover span { transform: translateX(4px); }
}
@media (min-width: 1700px) {
    .realm { padding-right: 9%; }
    .realm--crow { padding-left: 9%; padding-right: 30px; }
    .realm__content { max-width: 400px; }
    .realm__identity { height: 190px; }
    .realm__logo { width: 365px; height: 195px; }
    .realm__logo--crow { width: 400px; }
    .realm__tagline { font-size: 21px; }
    .realm__opening, .realm__cta { width: 340px; }
}
@media (max-width: 1250px) {
    .realm, .realm--crow { justify-content: center; padding: 225px 28px 100px; }
    .realm__art { background-position: 30% 25%; opacity: .8; }
    .realm--crow .realm__art { background-position: 65% 25%; }
    .realm::before { background: linear-gradient(180deg, #07080dcc, transparent 20%, #080b148f 45%, #080b14e8 78%, #07080d), linear-gradient(90deg, #080b1440, #080b14a0); }
    .realm--crow::before { background: linear-gradient(180deg, #07080dcc, transparent 20%, #160a128f 45%, #160a12e8 78%, #07080d), linear-gradient(90deg, #160a12a0, #160a1240); }
    .realm__side-label { display: none; }
    .realm__content { max-width: 345px; }
    .realm__logo--crow { width: 345px; }
    .portal-footer { font-size: 7px; letter-spacing: 1px; }
}
@media (min-width: 761px) and (max-height: 850px) {
    .portal-header { padding-top: 18px; }
    .portal-heading { top: 67px; }
    .portal-heading h1 { font-size: 29px; margin: 10px 0; }
    .realm, .realm--crow { min-height: max(745px, 100svh); padding-top: 169px; padding-bottom: 82px; }
    .realm__identity { height: 115px; }
    .realm__logo { height: 125px; width: 290px; }
    .realm__logo--crow { width: 340px; }
    .realm__index { margin-bottom: 8px; font-size: 8px; }
    .realm__tagline { font-size: 16px; line-height: 1.5; margin: 12px 0 18px; }
    .realm__mode-note { font-size: 10px; line-height: 1.5; }
    .realm__opening { padding: 15px 20px 13px; }
    .realm__opening b { font-size: 66px; }
    .realm__opening time { margin-top: 8px; }
    .realm__opening p { display: none; }
    .realm__launch-status { margin-top: 9px; }
    .realm__details { margin: 12px 0; }
    .realm__cta { min-height: 54px; padding-top: 15px; padding-bottom: 15px; }
    .realm__links { margin-top: 6px; }
    .realms__divider { top: 165px; }
}
@media (min-width: 761px) and (max-height: 790px) {
    .portal-heading { top: 62px; }
    .portal-heading h1 { font-size: 26px; }
    .realm, .realm--crow { min-height: max(730px, 100svh); padding-top: 153px; padding-bottom: 78px; }
    .realm__identity { height: 100px; }
    .realm__logo { height: 110px; }
    .realm__tagline { margin: 10px 0 14px; font-size: 14px; }
    .realm__details { margin: 10px 0; }
    .realm__links { margin-top: 4px; }
    .realms__divider { top: 145px; }
}
@media (max-width: 760px) {
    .portal-header { padding: 18px 24px; }
    .portal-brand { font-size: 13px; letter-spacing: 2px; }
    .portal-brand small { font-size: 7px; letter-spacing: 3px; }
    .portal-nav { gap: 13px; }
    .portal-nav a { font-size: 10px; letter-spacing: 1px; }
    .portal-nav span { display: none; }
    .portal-heading { top: 100px; }
    .portal-heading > span { font-size: 8px; letter-spacing: 2px; }
    .portal-heading h1 { font-size: 28px; }
    .realms { grid-template-columns: minmax(0, 1fr); }
    .realm { min-height: max(860px, 100svh); padding: 235px 30px 58px; }
    .realm--crow { min-height: 715px; padding: 64px 30px 56px; border-top: 1px solid #ca6b8550; }
    .realm__identity { height: 155px; }
    .realm__logo { height: 165px; }
    .realm__tagline { font-size: 19px; }
    .realm__art { background-size: auto 110%; background-position: 25% 25%; }
    .realm--crow .realm__art { background-size: auto 115%; background-position: 80% 20%; }
    .realm__opening b { font-size: 74px; }
    .realm__opening time > span { font-size: 14px; }
    .realm::after { inset: 16px; }
    .realm__watermark { font-size: 75px; letter-spacing: 8px; bottom: 20px; }
    .realms__divider { display: none; }
    .portal-footer { position: relative; display: flex; flex-wrap: wrap; justify-content: center; padding: 20px 24px; gap: 15px 22px; font-size: 8px; line-height: 1.6; text-align: center; }
    .portal-footer > span:first-child { width: 100%; }
    .portal-footer > span:last-child { text-align: center; }
}
@media (max-width: 380px) {
    .portal-header { padding-left: 20px; padding-right: 20px; }
    .realm, .realm--crow { padding-left: 24px; padding-right: 24px; }
    .realm__index { font-size: 8px; letter-spacing: 1.5px; }
    .realm__tagline { font-size: 17px; }
    .realm__opening { padding-left: 16px; padding-right: 16px; }
    .realm__details > span { font-size: 9px; padding-left: 8px; padding-right: 8px; }
    .realm__links { gap: 14px; }
    .realm__links a { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .realm__embers, .realm__light { display: none; }
    .realm__art { transform: none !important; }
}
@media (forced-colors: active) {
    .realm__cta, .realm__opening { border: 1px solid ButtonText; }
    .realm__opening b { background: none; color: CanvasText; }
    .realm__art, .realm__embers, .realm__light, .realm__watermark { display: none; }
}
/* Unified realm presentation */
.realm--kael .realm__art {
    right: auto;
    width: 68%;
    max-width: 680px;
    background-size: cover;
    background-position: center 25%;
    mask-image: linear-gradient(90deg, #000 62%, #000d 76%, transparent 100%);
}
.realm--crow .realm__art {
    mask-image: linear-gradient(90deg, transparent 0%, #000d 25%, #000 46%);
}
.realm::after { border-color: rgba(var(--rgb), .08); opacity: .55; }
.portal-heading h1 { letter-spacing: 1.8px; }
.portal-heading__ornament::before, .portal-heading__ornament::after { width: 90px; }
.realm__content { max-width: 390px; }
.realm__index { letter-spacing: 3px; margin-bottom: 14px; color: #e5d1c1; }
.realm--crow .realm__index { color: #edc3cf; }
.realm__identity::before { inset: 8% 0; background: radial-gradient(ellipse, rgba(var(--rgb), .15), transparent 70%); filter: blur(15px); }
.realm__logo { filter: drop-shadow(0 12px 14px #000b) drop-shadow(0 0 18px rgba(var(--rgb), .12)); }
.realm__panel {
    position: relative;
    width: 100%;
    padding: 27px 26px 25px;
    margin-top: 14px;
    border: 1px solid rgba(var(--rgb), .22);
    background: linear-gradient(155deg, rgba(var(--rgb), .07), #070b12b5 42%, #080a10e8);
    box-shadow: 0 24px 65px #0005, inset 0 1px #ffffff06;
    backdrop-filter: blur(12px);
    border-radius: 3px;
}
.realm--crow .realm__panel { background: linear-gradient(155deg, rgba(var(--rgb), .09), #160b14b5 42%, #100a11e8); }
.realm__panel::before, .realm__panel::after {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    border-style: solid;
    border-color: rgba(var(--rgb), .7);
    pointer-events: none;
}
.realm__panel::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.realm__panel::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.realm__tagline { margin: 0 0 24px; font-size: 21px; line-height: 1.4; }
.realm__mode { display: block; color: #f2d6b3; letter-spacing: .25px; }
.realm--crow .realm__mode { color: #f1c1ce; }
.realm__mode-note { display: block; margin-top: 11px; color: #d6c6c7; font-size: 12px; line-height: 1.5; letter-spacing: .2px; }
.realm__opening, .realm--crow .realm__opening {
    width: 100%; padding: 20px 0 0; border: 0; border-top: 1px solid rgba(var(--rgb), .18);
    background: none; box-shadow: none; backdrop-filter: none;
}
.realm__opening::before, .realm__opening::after { display: none; }
.realm__opening-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.realm__opening-label { justify-content: flex-start; font-size: 8px; letter-spacing: 1.8px; gap: 7px; }
.realm__launch-status { margin: 0; padding: 6px 8px; background: rgba(var(--rgb), .07); border: 1px solid rgba(var(--rgb), .15); font-size: 8px; letter-spacing: .6px; white-space: nowrap; }
.realm__launch-dot { width: 3px; height: 3px; }
.realm__opening time { justify-content: flex-start; gap: 22px; margin-top: 20px; padding: 0 22px; }
.realm__opening b { font-size: 86px; line-height: .9; }
.realm__opening time > span { font-size: 14px; letter-spacing: 3.5px; }
.realm__opening small { font-size: 9px; letter-spacing: 1px; color: #cebdbf; }
.realm__details { margin: 22px 0 20px; padding: 0; }
.realm__details > span { padding: 4px 9px; font-size: 9px; letter-spacing: .5px; }
.realm__details .realm__unique { background: none; }
.realm__cta { width: 100%; min-height: 62px; padding: 14px 20px; font-size: 11px; letter-spacing: 2px; border-radius: 2px; box-shadow: 0 6px 24px #0004, inset 0 1px #fff5; }
.realm__cta > span { display: grid; place-items: center; width: 42px; height: 30px; margin-right: -7px; border-left: 1px solid #37241925; font-size: 24px; }
.realm--crow .realm__cta > span { border-left-color: #f8d5df30; }
.realm__links { margin-top: 12px; gap: 25px; }
.realm__links a { color: #c7b8bd; font-size: 11px; }
.realm__watermark { opacity: .6; }
.realms__divider { box-shadow: none; background: linear-gradient(transparent, #cfaa7d45 30%, #d3678645 70%, transparent); }
.realms__divider span { height: 54px; width: 33px; font-size: 17px; }
@media (hover: hover) and (pointer: fine) {
    .realm:hover .realm__opening { box-shadow: none; border-color: rgba(var(--rgb), .28); }
    .realm:hover .realm__panel { border-color: rgba(var(--rgb), .34); }
}
@media (min-width: 1700px) {
    .realm__content { max-width: 410px; }
    .realm__logo { width: 370px; }
    .realm__logo--crow { width: 405px; }
    .realm__tagline { font-size: 22px; }
    .realm__opening, .realm__cta { width: 100%; }
}
@media (max-width: 1250px) {
    .realm__content { max-width: 345px; }
    .realm__panel { padding: 24px 20px 22px; }
    .realm__tagline { font-size: 18px; }
    .realm__mode-note { font-size: 11px; }
    .realm__opening time { padding-left: 12px; padding-right: 12px; gap: 18px; }
    .realm--kael .realm__art { width: 100%; max-width: none; mask-image: linear-gradient(90deg, #000 20%, #0008 80%, transparent); }
    .realm--crow .realm__art { mask-image: linear-gradient(90deg, #0008, #000); }
}
@media (min-width: 761px) and (max-height: 850px) {
    .realm__panel { margin-top: 10px; padding: 19px 22px 19px; }
    .realm__tagline { margin: 0 0 17px; font-size: 18px; }
    .realm__mode-note { font-size: 10px; margin-top: 8px; }
    .realm__opening { padding-top: 16px; }
    .realm__opening time { margin-top: 15px; }
    .realm__opening b { font-size: 65px; }
    .realm__details { margin: 16px 0; }
    .realm__cta { min-height: 54px; padding-top: 10px; padding-bottom: 10px; }
}
@media (min-width: 761px) and (max-height: 790px) {
    .realm__panel { padding: 16px 20px 16px; }
    .realm__tagline { font-size: 17px; margin-bottom: 15px; }
    .realm__opening { padding-top: 13px; }
    .realm__opening time { margin-top: 13px; }
    .realm__opening b { font-size: 61px; }
    .realm__details { margin: 14px 0; }
}
@media (max-width: 760px) {
    .realm { padding-top: 225px; min-height: max(850px, 100svh); }
    .realm--crow { padding-top: 65px; min-height: 715px; }
    .realm__panel { margin-top: 14px; padding: 25px 23px 23px; }
    .realm__tagline { font-size: 20px; margin-bottom: 23px; }
    .realm__mode-note { font-size: 11px; }
    .realm__opening { padding-top: 19px; }
    .realm__opening time { margin-top: 20px; padding: 0 16px; }
    .realm__opening b { font-size: 78px; }
    .realm--kael .realm__art, .realm--crow .realm__art { mask-image: linear-gradient(#000 10%, #000a 40%, transparent 90%); }
    .realm--kael .realm__art { background-size: cover; background-position: center 25%; }
}
@media (max-width: 380px) {
    .realm__panel { padding: 22px 18px 20px; }
    .realm__tagline { font-size: 17px; }
    .realm__opening-heading { gap: 6px; }
    .realm__opening-label { font-size: 7px; letter-spacing: 1px; }
    .realm__launch-status { font-size: 7px; padding: 5px 6px; }
    .realm__opening time { padding: 0 8px; gap: 15px; }
    .realm__opening b { font-size: 70px; }
    .realm__opening time > span { font-size: 12px; letter-spacing: 2px; }
    .realm__details > span { font-size: 8px; padding: 4px 7px; }
    .realm__links { gap: 18px; }
}
@media (forced-colors: active) {
    .realm__panel { background: Canvas; border: 1px solid CanvasText; }
    .realm__mode, .realm--crow .realm__mode { color: CanvasText; }
}
@media (min-width: 761px) and (min-height: 851px) and (max-height: 980px) {
    .realm, .realm--crow { min-height: max(850px, 100svh); padding-top: 195px; padding-bottom: 92px; }
    .realm__identity { height: 175px; }
    .realm__index { margin-bottom: 10px; }
}

/* Each wordmark has its own rhythm; both remain readable throughout. */
body[data-effects='on'] .realm__logo--kael {
    transform-origin: 50% 55%;
    animation: kael-forged-energy 6s ease-in-out infinite;
}
body[data-effects='on'] .realm__logo--crow {
    transform-origin: 50% 50%;
    animation: crow-shadow-flight 8s ease-in-out infinite;
}
@keyframes kael-forged-energy {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 12px 14px #000b) drop-shadow(0 0 8px #c62a3540);
    }
    32% {
        transform: translateY(-3px) scale(1.012);
        filter: drop-shadow(0 12px 14px #000b) drop-shadow(0 0 18px #eb384e70);
    }
    48% {
        transform: translateY(-2px) scale(1.006);
        filter: drop-shadow(0 12px 14px #000b) drop-shadow(0 0 11px #c62a3550);
    }
    62% {
        transform: translateY(-4px) scale(1.018);
        filter: drop-shadow(0 12px 14px #000b) drop-shadow(0 0 24px #ef493b80);
    }
}
@keyframes crow-shadow-flight {
    0%, 100% {
        transform: translateY(2px) rotate(-.6deg);
        filter: drop-shadow(0 14px 15px #000c) drop-shadow(-6px 2px 12px #8d294940);
    }
    35% {
        transform: translateY(-6px) rotate(.5deg);
        filter: drop-shadow(0 20px 20px #0009) drop-shadow(6px -2px 20px #cd486560);
    }
    68% {
        transform: translateY(-2px) rotate(-.2deg);
        filter: drop-shadow(0 16px 18px #000b) drop-shadow(-3px 1px 16px #ac345660);
    }
}
body[data-effects='off'] .realm__logo {
    animation: none;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    body[data-effects='on'] .realm__logo { animation: none !important; transform: none !important; }
}