/* Nebula Sanctuary: warm light, vivid skies, and room to breathe. */
:root {
  --bg: #0c0921;
  --surface: #15132f;
  --surface2: #1d1a3c;
  --text: #f7f2ff;
  --muted: #b9b8d2;
  --gold: #ebc992;
  --gold-bright: #ffe5b5;
  --border: #bcb5ff2b;
  --lavender: #ccb3ff;
  --cyan: #94e9f2;
}

body {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 0% 33%, #7036a51c, transparent 28%),
    radial-gradient(ellipse at 100% 60%, #147fb219, transparent 32%),
    var(--bg);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .52;
  background-image:
    radial-gradient(circle at 29px 38px, #dcd3ff 0 .7px, transparent 1px),
    radial-gradient(circle at 176px 155px, #95d7ff 0 .6px, transparent 1px),
    radial-gradient(circle at 261px 77px, #ffe2b5 0 .7px, transparent 1.2px),
    radial-gradient(circle at 98px 202px, #b7dfff 0 .5px, transparent 1px),
    radial-gradient(circle at 302px 186px, #dac1ff 0 .8px, transparent 1.3px);
  background-size: 330px 240px;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 0% 24%, #7739ba45, transparent 46%),
    radial-gradient(ellipse at 100% 66%, #167f9f3b, transparent 43%),
    radial-gradient(ellipse at 65% 110%, #8e3a7d30, transparent 49%);
  opacity: .7;
  animation: sanctuary-aurora 32s ease-in-out infinite alternate;
}
@keyframes sanctuary-aurora { to { opacity: .95; } }
html.still body::after { animation-play-state: paused; }
.site-header {
  max-width: none;
  background: linear-gradient(110deg, #110d29ed, #11132ae8);
  border-bottom-color: #b8a5fa2e;
}
.brand img, .footer-brand img { filter: drop-shadow(0 0 10px #f3ca8c30); }
.brand-order { color: #ddc4ff; }
.navigation { color: #c1bed7; }
.navigation a.active { color: #f3dcff; }
.navigation a.active::after { background: linear-gradient(90deg, var(--lavender), var(--cyan)); }
.header-join { border-color: #be9bf583; background: #a47ae411; }

.hero {
  min-height: 740px;
  max-width: none;
  padding: 106px max(7%, calc((100% - 1220px) / 2)) 106px;
  background: #09091f;
}
.hero-art { inset: 0; width: 100%; height: 100%; opacity: 1; }
.hero-art img { object-fit: cover; object-position: center 52%; }
.hero-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #09091fe8 0%, #09091fb3 27%, #09091f40 47%, transparent 68%),
    linear-gradient(0deg, var(--bg) 0%, #0c092135 15%, transparent 35%, #0c092130 100%);
}
.hero-copy { max-width: 650px; }
.hero h1 {
  font-size: clamp(66px, 6vw, 86px);
  line-height: 1.02;
  letter-spacing: -1.8px;
  margin: 30px 0 24px;
  text-shadow: 0 3px 24px #09091f70;
}
.hero h1 em { color: #ffe2aa; }
.hero .eyebrow { color: #d2bcff; font-size: 10px; letter-spacing: 2.5px; }
.gold-line { background: linear-gradient(90deg, #b597f4, #92e9ec); }
.hero-copy > p { max-width: 405px; color: #d5d1e5; font-size: 14px; line-height: 1.95; }
.hero-actions { gap: 29px; margin-top: 31px; }
.hero-footnote { position: static; margin-top: 40px; color: #c4bed8; font-size: 10px; line-height: 1.9; }
.hero-footnote strong { color: #dbd2ef; }
.small-sigil { color: var(--gold-bright); text-shadow: 0 0 20px #f1cb8e60; }
.art-caption { right: 7%; bottom: 42px; color: #e5d4f4; font-size: 7px; }
.scroll-hint { left: max(7%, calc((100% - 1220px) / 2)); bottom: 36px; color: #c7c1da; }
.scroll-hint span { color: var(--gold-bright); }
.motion-control {
  position: absolute;
  top: 24px;
  right: 4.5%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d5c5ff46;
  border-radius: 20px;
  background: #100c28b8;
  color: #e0d7f2;
  font-size: 9px;
  padding: 8px 12px;
  backdrop-filter: blur(10px);
}
.motion-control > span:first-child { color: var(--gold-bright); font-size: 16px; line-height: 1; }
.motion-control:hover { background: #282045; border-color: #ddc9ff80; }
.motion-control:disabled { opacity: .8; cursor: default; }
.starlight, .nebula-haze { position: absolute; inset: 0; pointer-events: none; }
.starlight {
  opacity: .5;
  background-image:
    radial-gradient(circle at 65% 19%, #fff6d6 0 1px, transparent 2px),
    radial-gradient(circle at 87% 42%, #d0edff 0 1px, transparent 2px),
    radial-gradient(circle at 43% 61%, #c9b1ff 0 .8px, transparent 1.6px),
    radial-gradient(circle at 55% 80%, #fff1d8 0 .7px, transparent 1.5px);
  background-size: 470px 390px;
  animation: sanctuary-stars 18s ease-in-out infinite alternate;
}
.nebula-haze {
  inset: 0 -3%;
  background:
    radial-gradient(ellipse at 65% 40%, #7e57e82a, transparent 37%),
    radial-gradient(ellipse at 89% 65%, #53d1ea20, transparent 32%);
  mix-blend-mode: screen;
  animation: sanctuary-drift 28s ease-in-out infinite alternate;
}
@keyframes sanctuary-stars { to { opacity: .9; transform: translate3d(5px, -8px, 0); } }
@keyframes sanctuary-drift { to { transform: translate3d(-16px, 9px, 0); opacity: .55; } }
html.still .starlight, html.still .nebula-haze { animation-play-state: paused; }
html.still { scroll-behavior: auto; }

.button-gold {
  background: linear-gradient(115deg, #ffe1ae, #e2b77d);
  border-color: #f5d39e;
  color: #251c35;
  box-shadow: 0 4px 25px #dfb7771c;
}
.button-gold:hover { background: linear-gradient(115deg, #ffebc5, #f0c993); box-shadow: 0 5px 27px #dfb77730; }
.button-outline { border-color: #bca2ed70; color: #eadbff; background: #a17ac80a; }
.button-outline:hover { border-color: #d1b5ff; background: #b38bee13; }
.text-link { color: #d5bfff; }
.text-link:hover { color: #c2f6ff; }
.eyebrow { color: #c9adff; }
.invitation {
  background: linear-gradient(105deg, #21133475, #12203a5c, #21133440);
  border-top-color: #b18bee30;
  border-bottom-color: #b18bee30;
  padding-top: 35px;
  padding-bottom: 35px;
}
.invitation > p { font-size: 30px; }
.invitation-note { color: #c1b9d5; font-size: 12px; }
.arrival-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 27px; padding-top: 32px; padding-bottom: 0; }
.arrival-paths > a { display: flex; align-items: center; gap: 15px; padding: 18px 0 24px; border-bottom: 1px solid #b8a5fa35; }
.path-number { color: #a994cd; font-size: 9px; letter-spacing: 1px; }
.arrival-paths h2 { font-size: 23px; margin: 0 0 5px; line-height: 1.2; }
.arrival-paths p { font-size: 10px; margin: 0; color: #b3abc9; }
.path-arrow { margin-left: auto; font-family: 'DejaVu Sans', sans-serif; font-size: 16px; color: var(--lavender); }
.arrival-paths a:hover h2 { color: #d9c2ff; }
.section-heading h2 { color: #f5edff; }
.collection-visual { border: 1px solid #cfabff21; }
.collection-music .collection-visual { background: radial-gradient(ellipse at 50% 35%, #684a79, #222555 65%, #17132e); }
.vinyl { box-shadow: 10px 15px 35px #0602197a, 0 0 35px #ac7ce41f; }
.vinyl::before { background: #d5b7e6; box-shadow: inset 0 0 0 2px #e7caf0, inset 0 0 0 4px #77628d; }
.sound-orbit { border-color: #beb1fa73; }
.book-art { background: radial-gradient(ellipse at 65% 30%, #6e426f, #302447 65%, #1a1630); }
.book { background: linear-gradient(110deg, #4a3b76, #272b54); border-left-color: #2c244b; border-right-color: #d3bd9a; outline-color: #d6b6f050; }
.image-art img { transform: scale(1.05); object-position: 77% 50%; }
.circle-arrow { border-color: #b595ef4a; color: #d9c3ff; background: #a67de50a; }
.collection:hover .circle-arrow { background: #a67de529; border-color: #c9a4fa; }
.collection > p, .order-preview-copy > p { color: #bfb8d2; }
.order-preview { border-top-color: #b8a5fa30; }
.order-symbol { background: radial-gradient(ellipse, #7545ba2a, #3d348513 50%, transparent 70%); }
.symbol-ring { border-color: #b998e346; }
.ring-two { border-color: #a3d3f06b; }
.order-symbol img { filter: drop-shadow(0 0 19px #d7bcff40); }
.founder-note { background: linear-gradient(110deg, #29183ba8, #171c39d9); border-color: #b7a0df3a; }
.realm-invitation { padding-top: 65px; padding-bottom: 85px; background: radial-gradient(ellipse at 50% 85%, #50308237, transparent 65%); }
.realm-invitation::before { border-color: #c0a4ef24; }
.realm-invitation h2 { font-size: 51px; }
.realm-invitation p { color: #c1b9d6; }
.realm-signature { color: #b4a3ce; }
.site-footer { position: relative; background: #0b0921ae; border-color: #b8a5fa30; }
.site-footer > p { color: #b5a9ca; }

.page-intro {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 85% 12%, #663ba534, transparent 57%);
}
.page-intro::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  height: 180px;
  right: 12%;
  top: 48px;
  border: 1px solid #bfa8f626;
  border-radius: 50%;
  box-shadow: 0 0 75px #8954d423, inset 0 0 55px #5079cb14;
  pointer-events: none;
}
.page-intro::before {
  background: radial-gradient(circle at 31% 24%, #b4d8f85e, #6551a84f 34%, #30204980 64%, #0f0d2300 78%);
  border-color: #bea7ed52;
  box-shadow: 0 0 60px #8e5fd63d, inset -25px -15px 45px #09081a9e;
}
.page-intro::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 101px;
  right: 8.5%;
  width: 267px;
  height: 69px;
  border: 1px solid #d5b8e34a;
  border-radius: 50%;
  transform: rotate(-22deg);
  box-shadow: 0 0 18px #a68ff51a;
  pointer-events: none;
}
.arrival-paths > a { border-image: linear-gradient(90deg, #b99ce74d, #89d7ed3b, transparent) 1; }
.collection-visual { box-shadow: 0 0 35px #7852b110; }
.order-symbol { background: radial-gradient(ellipse, #7c4bc441, #33449e22 48%, transparent 73%); }
.realm-shell { box-shadow: 0 15px 65px #03001335, 0 0 75px #7150b31c; }
.page-intro > p { color: #c5bed8; }
.lore-visual { background: radial-gradient(ellipse, #633d8f38, #1d173137 65%); border-color: #b99bdd37; }
.lore-visual img { filter: drop-shadow(0 0 24px #cba1ff40); }
.lore-layout .muted, .community-agreement .muted { color: #aaa1bf !important; }
.tag { color: #d8c2ff; border-color: #c09ceb4f; }
.tab { color: #afa6c6; }
.tab.active { color: #e3d1ff; }
.tab.active::after { background: linear-gradient(90deg, #c5a0ff, #8dddeb); }
.work-card { background: linear-gradient(145deg, #201835, #14142b); border-color: #b59ad736; }
.work-cover { background: radial-gradient(ellipse at 50% 30%, #4b3667, #24284c 60%, #17142e); }
.work-cover .work-icon { color: #d7b8ff; text-shadow: 0 0 32px #b27df64a; }
.work-copy > p { color: #c0b8d0; }
.work-byline, .post-meta { color: #aaa0be; }
.post-avatar, .message-avatar { background: #bd95f21c; border-color: #b48ae749; color: #ddc7ff; }
.post-row-content > p { color: #c1b8d0; }
.post-title:hover { color: #d8bcff; }
.empty-state { background: radial-gradient(ellipse at 50% 0%, #9460d220, transparent 80%); border-color: #bea0e33b; }
.realm-shell { background: #151229ed; border-color: #bc9de247; box-shadow: 0 15px 65px #03001335, 0 0 65px #7145a80b; }
.realm-sidebar { background: linear-gradient(160deg, #221637, #13132b); border-color: #b99bdd2d; }
.channel { color: #c6bed7; }
.channel small { color: #a99dbd; }
.channel.active { background: linear-gradient(90deg, #a277da24, #688ce410); border-color: #c4a0ff55; color: #ecddff; }
.realm-sidebar-note p { color: #bcaace; }
.chat-heading p, .chat-footnote { color: #a99dbb; }
.message-meta { color: #dfcaff; }
.message-main > p { color: #d0c5de; }
.message-meta time, .message-meta button { color: #aea1bf; }
input, select, textarea { background: #100e24; border-color: #bca0db3c; }
input::placeholder, textarea::placeholder { color: #9d91af; }
dialog { background: linear-gradient(145deg, #221733, #13132a 75%); border-color: #c7a2ec66; }
.modal-title em { color: #ead09f; }
.sign-in-note, .membership-card { border-color: #bb9bdf40; }
.membership-card { background: radial-gradient(ellipse at 0 0, #9b62cf22, transparent); }
.form-stack label { color: #d1c5df; }
.form-help { color: #a99cbd; }
.toast { background: #2b2042; border-color: #caa3f09c; color: #f4e6ff; }

@media (min-width: 1600px) {
  .hero { min-height: 810px; padding-top: 130px; }
  .hero h1 { font-size: 92px; }
}
@media (max-width: 1120px) {
  .hero { min-height: 710px; padding: 110px 7% 90px; }
  .hero h1 { font-size: 71px; }
  .hero-copy { max-width: 570px; }
  .hero-art img { object-position: 57% 50%; }
  .hero-art::after { background: linear-gradient(90deg, #09091fe8, #09091f80 40%, transparent 80%), linear-gradient(0deg, var(--bg), transparent 27%); }
  .arrival-paths { gap: 22px; }
  .arrival-paths h2 { font-size: 21px; }
  .arrival-paths p { font-size: 9px; }
  .invitation-note { font-size: 11px; }
}
@media (max-width: 850px) {
  .navigation { background: #17112bf7; border-color: #bca5e94f; }
  .hero { min-height: 710px; padding: 105px 7% 90px; }
  .hero h1 { font-size: 68px; }
  .hero-copy { max-width: 540px; }
  .hero-copy > p { max-width: 350px; font-size: 13px; }
  .hero-art { inset: 0; width: 100%; height: 100%; opacity: 1; }
  .hero-art img { object-position: 62% 50%; }
  .hero-art::after { background: linear-gradient(90deg, #09091ff0, #09091fb3 35%, #09091f40 75%), linear-gradient(0deg, var(--bg), transparent 27%); }
  .hero .eyebrow { font-size: 9px; letter-spacing: 2px; }
  .hero-footnote { font-size: 9px; margin-top: 35px; }
  .art-caption { right: 7%; bottom: 39px; font-size: 6px; }
  .invitation-note { font-size: 10px; }
  .arrival-paths { gap: 20px; padding-top: 24px; padding-bottom: 0; }
  .arrival-paths > a { gap: 10px; align-items: flex-start; }
  .arrival-paths h2 { font-size: 21px; }
  .arrival-paths p { line-height: 1.6; }
  .path-number { padding-top: 4px; font-size: 8px; }
  .path-arrow { font-size: 13px; padding-top: 2px; }
  .realm-invitation h2 { font-size: 44px; }
}
@media (max-width: 580px) {
  .hero { padding: 64px 7% 92px; min-height: 910px; }
  .hero-copy { max-width: none; }
  .hero h1 { font-size: clamp(48px, 12.8vw, 66px); line-height: 1.04; margin-top: 23px; margin-bottom: 20px; letter-spacing: -1.4px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: 1.8px; }
  .hero-copy > p { max-width: 350px; font-size: 12px; line-height: 1.9; color: #d3cbe3; }
  .hero-art { inset: auto -28% 0; width: 156%; height: 570px; opacity: 1; }
  .hero-art img { object-position: 100% 50%; }
  .hero-art::after { background: linear-gradient(180deg, #09091f 0%, #09091f70 16%, transparent 38%, #0c092138 80%, var(--bg) 100%); }
  .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 0%, #5c30702b, transparent 38%); pointer-events: none; }
  .hero-actions { flex-wrap: wrap; gap: 23px; margin-top: 24px; }
  .hero-actions .button { padding: 13px 15px; font-size: 10px; min-height: 46px; gap: 22px; }
  .hero-actions .text-link { font-size: 10px; gap: 10px; }
  .hero-footnote { position: static; margin-top: 25px; padding: 10px 12px; max-width: 340px; font-size: 8.5px; line-height: 1.8; background: #100c29b8; border: 1px solid #b8a4f026; border-radius: 2px; backdrop-filter: blur(6px); }
  .art-caption { display: none; }
  .motion-control { top: auto; right: 7%; bottom: 26px; min-height: 40px; font-size: 8px; padding: 7px 11px; }
  .scroll-hint { left: 7%; bottom: 32px; font-size: 6px; color: #c3b5d6; }
  .invitation { padding: 29px 7%; gap: 20px; }
  .invitation > p { font-size: 28px; }
  .invitation-note { font-size: 10px; }
  .arrival-paths { grid-template-columns: 1fr; gap: 0; padding-top: 17px; padding-bottom: 0; }
  .arrival-paths > a { padding: 18px 0; gap: 16px; align-items: center; }
  .arrival-paths h2 { font-size: 25px; }
  .arrival-paths p { font-size: 10px; }
  .path-number { font-size: 8px; }
  .path-arrow { font-size: 15px; }
  .realm-invitation { padding-top: 45px; padding-bottom: 60px; }
  .realm-invitation h2 { font-size: 40px; }
  .realm-signature { font-size: 6px; letter-spacing: 1.1px; }
  .page-intro::before { width: 115px; height: 115px; top: 35px; right: 4%; }
  .page-intro::after { width: 169px; height: 44px; top: 73px; right: .5%; }
  .image-art img { object-position: 79% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .starlight, .nebula-haze, body::after { animation: none; }
  html { scroll-behavior: auto; }
}