.origins-section { position: relative; margin: 0; background: #080c0b; }
@media (min-width: 821px) {
  main > section,
  main > .hero,
  main > .world-section,
  main > .world-section.is-race-view {
    height: 100svh;
    min-height: 0;
    max-height: none;
    margin-block: 0;
    scroll-margin-top: 0;
    box-sizing: border-box;
  }

  .world-map-view .world-map {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: none;
  }
  .world-map-view .world-content { padding-block: 72px 110px; }
  .world-content h2 { font-size: clamp(32px, 5.5svh, 64px); margin-bottom: 20px; }
  .world-overview { font-size: clamp(13px, 1.6svh, 18px); line-height: 1.75; }

  .rpg-section, .media-section, .faq-section {
    padding-top: clamp(82px, 11svh, 125px);
    padding-bottom: clamp(24px, 4svh, 48px);
  }
  .section-index { margin-bottom: clamp(16px, 3svh, 36px); }
  .section-heading { margin-bottom: clamp(18px, 3svh, 40px); }
  .section-heading h2 { font-size: clamp(34px, 5.6svh, 68px); margin: 12px 0 18px; }
  .section-heading > p:last-child { margin-bottom: 0; }
  .pillar-number { font-size: clamp(24px, 3.5svh, 36px); margin-bottom: 12px; }
  .pillar h3 { font-size: clamp(17px, 2.2svh, 21px); margin-bottom: 10px; }
  .pillar p { font-size: 12px; line-height: 1.65; margin-block: 0; }
  .pillar-label { margin-top: 16px; }

  .companion-inner {
    height: 100%;
    min-height: 0;
    padding-top: 84px;
    padding-bottom: 30px;
    gap: 8%;
  }
  .companion-copy h2 { font-size: clamp(34px, 6svh, 70px); margin-block: 12px 22px; }
  .companion-copy > p:not(.eyebrow) { font-size: 13px; line-height: 1.7; }
  .companion-copy .button { margin-top: 12px; }
  .development-note { margin-top: 18px; }
  .demo-frame { width: min(100%, calc((100svh - 210px) * .8)); justify-self: center; }

  .media-heading { margin-bottom: clamp(20px, 3svh, 40px); }
  .media-heading h2 { font-size: clamp(34px, 5.5svh, 68px); }
  .gallery-item img { height: clamp(160px, 40svh, 460px); }

  .faq-section { align-items: center; min-height: 0; }
  .faq-intro h2 { font-size: clamp(34px, 5.5svh, 68px); }
  .faq-list { min-height: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
  .faq-list summary { padding-block: clamp(12px, 2svh, 24px); font-size: 14px; }
  .faq-list details p { margin-bottom: 20px; font-size: 12px; line-height: 1.7; }

  .community-content { padding: 84px 25px 35px; }
  .community-content h2 { font-size: clamp(36px, 6.5svh, 78px); }

  .race-view:not([hidden]) {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 64px;
    box-sizing: border-box;
  }
  .race-view .race-intro { flex: 0 0 auto; padding-block: clamp(10px, 2svh, 24px); gap: 10px 30px; }
  .race-view .race-intro h2 { font-size: clamp(28px, 4svh, 48px); }
  .race-view .race-lore { font-size: clamp(11px, 1.4svh, 14px); line-height: 1.6; }
  .race-view .race-viewport { flex: 1 1 0; min-height: 0; height: auto; }
  .race-view .race-toolbar { flex: 0 0 auto; }
}
/* Preserve the full hero artwork in the document, including on ultrawide screens. */
main>.hero{height:max(100svh,calc((100vw + 2 * clamp(12px,1.67vw,32px)) * .421875 - 24px));min-height:0;max-height:none;margin-bottom:clamp(24px,3vw,48px)}
/* Origin imagery now fills the available section through its bottom edge. */
@media(min-width:821px){.race-view:not([hidden]){padding-bottom:0}.race-view .race-viewport{flex:1 1 0;min-height:0}.race-view .race-intro{grid-template-columns:1fr;padding-bottom:18px}.race-view .race-lore{grid-column:1/-1}}
@media(max-width:820px){.race-viewport{height:clamp(600px,80svh,900px)}}
/* Expand the map's visible canvas as the world's introduction opens. */
main>.world-section.is-world-expanded{height:auto;min-height:100svh;max-height:none;align-items:start}
.world-section.is-world-expanded .world-map-view{min-height:100svh;align-items:start}
.world-section.is-world-expanded .world-content{padding-top:72px;padding-bottom:72px}
.world-extra[hidden],.world-learn-more[hidden]{display:none}
.world-extra .world-overview{margin-top:24px}
.world-section.is-world-expanded .world-map{height:100%;object-position:left top}
.world-section.is-world-expanded .world-shade{background:linear-gradient(90deg,transparent 25%,rgba(10,17,15,.35) 46%,rgba(10,17,15,.82) 65%,rgba(10,17,15,.92)),linear-gradient(180deg,rgba(16,21,19,.12),transparent 25%,rgba(16,21,19,.18))}
@media(max-width:820px){.world-section.is-world-expanded .world-content{padding-top:32px;padding-bottom:48px}.world-section.is-world-expanded .world-shade{background:linear-gradient(180deg,rgba(16,21,19,.12),rgba(16,21,19,.85) 300px,rgba(16,21,19,.88))}}
/* Reveal additional map below the original screen even when the copy already fits. */
main>.world-section.is-world-expanded,.world-section.is-world-expanded .world-map-view{min-height:calc(100svh + min(35svh,320px))}
/* Center the full introduction in the expanded map and animate the canvas height. */
main>.world-section.is-world-expanded{align-items:stretch;padding-top:0}
.world-section.is-world-expanded .world-map-view{align-items:center;padding-top:0}
.world-section.is-world-expanded .world-content{padding-top:64px;padding-bottom:64px}
main>.world-section.is-world-opening{min-height:0}
.world-section.is-world-opening .world-map-view{height:100%;min-height:0}
/* One shared boundary treatment, with identical space on either side of the rule. */
.section-divider{width:100%;max-width:1920px;height:clamp(48px,6vw,80px);padding-inline:var(--gutter);margin:0 auto;display:flex;align-items:center;flex:none}
.section-divider::before{content:"";display:block;flex:1;height:1px;background:var(--line)}
main>.hero,main>.world-section,main>.origins-section,main>.rpg-section,main>.companion-section,main>.media-section,main>.faq-section,main>.community-section{margin-block:0}
/* Section rules span the full screen rather than the content gutters. */
.section-divider{max-width:none;padding-inline:0}
/* An illustrated RPG introduction using the same right-side fade as the world. */
main>.rpg-section{position:relative;isolation:isolate;max-width:none;height:auto;min-height:100svh;padding:0;overflow:hidden;background:#101513}
.rpg-background{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;z-index:-3}
.rpg-shade{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,rgba(10,17,15,.12) 20%,rgba(10,17,15,.42) 43%,rgba(10,17,15,.88) 63%,rgba(10,17,15,.95)),linear-gradient(180deg,rgba(16,21,19,.22),transparent 25%,rgba(16,21,19,.4))}
.rpg-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.13fr);align-items:center;gap:5%;min-height:100svh;padding-top:96px;padding-bottom:72px}
.rpg-book{margin:0;align-self:center}
.rpg-book img{width:100%;height:auto;max-height:78svh;object-fit:contain}
.rpg-copy .eyebrow{margin:0 0 22px}
.rpg-copy h2{font-size:clamp(32px,5.5svh,64px);line-height:1.12;margin:0 0 28px;letter-spacing:-1.5px}
.rpg-copy>p:not(.eyebrow){font-size:clamp(14px,1.05vw,18px);line-height:1.8;color:#edece4;margin:0 0 24px;text-wrap:pretty}
.rpg-copy>p:last-child{margin-bottom:0}
@media(max-width:1100px) and (min-width:821px){.rpg-inner{gap:3%;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.rpg-copy>p:not(.eyebrow){font-size:14px}}
@media(max-width:820px){.rpg-inner{grid-template-columns:1fr;gap:24px;padding-top:64px;padding-bottom:56px}.rpg-book{width:min(85%,420px);justify-self:center}.rpg-book img{max-height:50svh}.rpg-copy h2{font-size:clamp(38px,6.4vw,52px)}.rpg-copy>p:not(.eyebrow){font-size:14px;line-height:1.8}.rpg-shade{background:linear-gradient(180deg,rgba(10,17,15,.25),rgba(10,17,15,.88) 40%,rgba(10,17,15,.94))}}
/* Remove the pale translucent matte and use a clean dark shadow. */
.rpg-book{width:82%;justify-self:center}
.rpg-book img{filter:url('#book-clean-shadow') drop-shadow(0 16px 18px rgba(0,0,0,.4))}
@media(max-width:820px){.rpg-book{width:min(70%,340px)}}
/* Match the RPG typography to the world introduction at every breakpoint. */
.rpg-copy h2{font-size:clamp(42px,3.7vw,68px);line-height:1.12;letter-spacing:-1.5px;margin:0 0 30px;text-wrap:balance}
.rpg-copy>p:not(.eyebrow){font-size:clamp(16px,1.05vw,19px);line-height:1.9;color:#edece4;text-shadow:0 1px 12px rgba(0,0,0,.35);text-wrap:wrap}
@media(min-width:821px){.rpg-copy h2{font-size:clamp(32px,5.5svh,64px);margin-bottom:20px}.rpg-copy>p:not(.eyebrow){font-size:clamp(13px,1.6svh,18px);line-height:1.75}}
@media(max-width:820px){.rpg-copy h2{max-width:560px;font-size:clamp(38px,6.4vw,52px)}.rpg-copy>p:not(.eyebrow){max-width:620px;font-size:16px;line-height:1.8}}
@media(max-width:820px){.rpg-copy h2{font-size:32px;margin-bottom:20px}.rpg-copy .eyebrow{margin-bottom:12px}.rpg-copy>p:not(.eyebrow){font-size:13.5px;line-height:1.7}}
@media(max-height:700px){.rpg-copy h2{font-size:32px;margin-bottom:16px}.rpg-copy .eyebrow{margin-bottom:10px}.rpg-copy>p:not(.eyebrow){font-size:13px;line-height:1.6}}
/* Match the reference's generous typography rather than shrinking with screen height. */
.rpg-copy h2{font-size:clamp(48px,4vw,84px);line-height:1.12;margin-bottom:36px}
.rpg-copy .eyebrow{font-size:11px;letter-spacing:3.2px;margin-bottom:28px}
.rpg-copy>p:not(.eyebrow){font-size:clamp(18px,1.1vw,24px);line-height:1.9;margin-bottom:30px}
.rpg-copy>p:last-child{margin-bottom:0}
.rpg-inner{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1.13fr);gap:6%;padding-top:100px;padding-bottom:100px}
@media(max-width:1100px) and (min-width:821px){.rpg-inner{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:4%}.rpg-copy h2{font-size:48px}.rpg-copy>p:not(.eyebrow){font-size:17px;line-height:1.85}}
@media(max-width:820px){.rpg-inner{grid-template-columns:1fr;padding-top:64px;padding-bottom:64px;gap:28px}.rpg-copy h2{font-size:clamp(38px,6.4vw,52px);margin-bottom:26px}.rpg-copy .eyebrow{font-size:10px;margin-bottom:20px}.rpg-copy>p:not(.eyebrow){font-size:16px;line-height:1.85;margin-bottom:26px}}
/* Use the world's exact typography; reduce only the book artwork. */
.rpg-book{width:65%}
.rpg-copy h2{font-size:clamp(32px,5.5svh,64px);line-height:1.12;letter-spacing:-1.5px;margin-bottom:20px}
.rpg-copy .eyebrow{font-size:10px;font-weight:600;line-height:1.6;letter-spacing:3.2px;margin-bottom:22px}
.rpg-copy>p:not(.eyebrow){font-size:clamp(13px,1.6svh,18px);line-height:1.75;color:#edece4;text-shadow:0 1px 12px rgba(0,0,0,.35);text-wrap:wrap;margin-bottom:24px}
.rpg-copy>p:last-child{margin-bottom:0}
@media(max-width:820px){.rpg-book{width:min(56%,275px)}.rpg-copy h2{font-size:32px;margin-bottom:20px}.rpg-copy .eyebrow{margin-bottom:12px}.rpg-copy>p:not(.eyebrow){font-size:13.5px;line-height:1.7}}
@media(max-height:700px){.rpg-copy h2{font-size:32px;margin-bottom:16px}.rpg-copy .eyebrow{margin-bottom:10px}.rpg-copy>p:not(.eyebrow){font-size:13px;line-height:1.6}}
/* The supplied JPG includes the book; keep the copy in the right-hand column. */
.rpg-copy{grid-column:2}
@media(max-width:820px){.rpg-copy{grid-column:1}}
/* Keep the embedded book clear and concentrate the shade behind the narrower copy. */
.rpg-shade{background:linear-gradient(90deg,transparent 0%,transparent 43%,rgba(10,17,15,.14) 51%,rgba(10,17,15,.70) 65%,rgba(10,17,15,.86) 100%)}
.rpg-inner{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:7%}
.rpg-copy{width:100%;max-width:620px;justify-self:end}
@media(max-width:1100px) and (min-width:821px){.rpg-inner{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:6%}}
@media(max-width:820px){.rpg-inner{grid-template-columns:1fr}.rpg-copy{max-width:620px;justify-self:end}.rpg-shade{background:linear-gradient(180deg,rgba(10,17,15,.05),rgba(10,17,15,.60) 38%,rgba(10,17,15,.86))}}
/* Reserve the top of the composition for the embedded book on narrow screens. */
@media(max-width:820px){
 .rpg-background{object-position:30% top}
 .rpg-inner{padding-top:clamp(390px,78vw,650px);align-items:start}
 .rpg-shade{background:linear-gradient(180deg,transparent 0,transparent 240px,rgba(10,17,15,.18) 340px,rgba(10,17,15,.82) 480px,rgba(10,17,15,.92) 100%)}
}
/* Frame the embedded book above the copy, independently of the section's height. */
@media(max-width:820px){
 .rpg-section{--rpg-art-height:calc(220vw * 0.3888469095)}
 /* The embedded book is centered 38.05% across the source artwork. */
 .rpg-background{top:0;left:50%;right:auto;bottom:auto;width:220vw;height:auto;max-width:none;object-fit:contain;object-position:center top;transform:translateX(-38.05%)}
 .rpg-inner{min-height:100svh;padding-top:calc(var(--rpg-art-height) + 24px);padding-bottom:64px;align-items:start}
 .rpg-shade{top:0;left:0;right:0;bottom:auto;height:var(--rpg-art-height);background:linear-gradient(180deg,transparent 0%,transparent 70%,rgba(16,21,19,.55) 84%,#101513 100%)}
}
.rpg-development-label{display:block;margin-top:25px;color:var(--gold);font-size:11px;letter-spacing:.6px}

/* Restore the full Website Book composition across the desktop background. */
@media(min-width:821px){.rpg-background{inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;transform:none;mask-image:none;-webkit-mask-image:none}}
.rpg-development-label{font-weight:700}
/* Rectangle highlights follow the section currently in view. */
.site-header nav .nav-half>a::before{content:"";position:absolute;inset:-12px -12px;border:1px solid var(--gold);opacity:0;transition:opacity 200ms;pointer-events:none}
.site-header nav .nav-half>a.is-section-active::before{opacity:1}
@media(max-width:820px){.site-header nav .nav-half>a::before{inset:3px -12px}}
/* Selected origins occupy the complete screen below the menu. */
main>.origins-section.has-open-origin{height:auto;min-height:100svh}
.origins-section.has-open-origin .race-view:not([hidden]){height:auto;min-height:0;padding-top:var(--origin-menu-height)}
.origins-section.has-open-origin .race-viewport{height:calc(100svh - var(--origin-menu-height));min-height:calc(100svh - var(--origin-menu-height));flex:none}
/* Selected navigation uses a solid gold rectangle. */
.site-header nav .nav-half>a{isolation:isolate}
.site-header nav .nav-half>a::before{z-index:-1;background:var(--gold)}
.site-header nav .nav-half>a.is-section-active,.site-header nav .nav-half>a.is-section-active:hover{color:#101513}
.rpg-development-label{font-style:italic}
/* Companion preview and copy share a compact, viewport-sized layout. */
main>.companion-section{height:auto;min-height:100svh}
.companion-inner{min-height:100svh;height:auto;grid-template-columns:minmax(0,560px) minmax(0,350px);justify-content:center;gap:clamp(28px,4vw,72px);max-width:1440px;padding-block:72px}
.companion-copy h2{font-size:clamp(32px,4.7svh,58px);line-height:1.12;margin-block:16px 24px}
.companion-copy>p:not(.eyebrow){max-width:560px;font-size:clamp(13px,1.6svh,18px);line-height:1.75;color:#edece4}
.companion-copy .button{margin-top:14px;cursor:default}
.companion-section .demo-frame{width:min(100%,calc((100svh - 180px) * .65),350px);padding:6px;justify-self:center;transform:rotate(2deg)}
.companion-gif{display:block;width:100%;height:auto;aspect-ratio:832/1280;object-fit:contain}
@media(min-width:821px){.companion-inner{grid-template-columns:minmax(0,650px) minmax(0,350px);padding-inline:clamp(24px,2vw,40px)}}
@media(max-width:820px){
  .companion-inner{grid-template-columns:minmax(0,560px);gap:30px;padding-block:64px}
  .companion-copy h2{font-size:32px}
  .companion-copy>p:not(.eyebrow){font-size:13.5px;line-height:1.7}
  .companion-section .demo-frame{width:min(65vw,260px);transform:rotate(1deg)}
}
/* Keep the peoples introduction close to the map within the world section. */
@media(min-width:821px){.origins-section:not(.has-open-origin) .race-view:not([hidden]){padding-top:32px}}
@media(max-width:820px){.origins-section .race-intro{padding-top:20px}}
/* Keep the FAQ together and allow expanded answers to use normal page flow. */
main>.faq-section{width:100%;max-width:none;height:auto;min-height:100svh;grid-template-columns:minmax(0,400px) minmax(0,700px);justify-content:center;gap:clamp(28px,4vw,64px);padding-block:72px;align-items:center;background:url('assets/obsidian-city-web.png') center/cover no-repeat}
.faq-list{max-height:none;overflow:visible;overscroll-behavior:auto}
.faq-list details{background:rgba(0,0,0,.24);padding-inline:20px}
@media(max-width:820px){main>.faq-section{grid-template-columns:minmax(0,620px);gap:20px;padding-block:64px}}
.companion-copy .rpg-development-label{margin-top:20px;margin-bottom:20px}
main>.media-section{display:grid;place-items:center;height:auto;min-height:100svh;padding-block:72px}
.media-placeholder{display:grid;place-items:center;width:100%;min-height:clamp(240px,55svh,600px);padding:40px 24px;border:1px solid var(--gold);background:rgba(194,165,116,.035);text-align:center}
.media-placeholder h2{margin:0;font-size:clamp(32px,5.5svh,64px);line-height:1.12;letter-spacing:-1.5px}
@media(max-width:820px),(max-height:700px){.media-placeholder h2{font-size:32px}}
.faq-list details[data-expanded="false"] summary span{transform:rotate(0deg)}
.faq-list details[data-expanded="true"] summary span{transform:rotate(45deg)}
/* The final section and footer fit together below the fixed menu. */
main>.community-section{height:auto;min-height:calc(100svh - 128px);padding:0}
.community-content{width:100%;max-width:900px;margin-inline:auto;padding:40px 24px}
.community-content h2{font-size:clamp(32px,5.5svh,64px);line-height:1.12;margin-block:16px 24px}
.site-footer{min-height:64px;padding:20px 24px;justify-content:center;text-align:center}
@media(max-width:820px){main>.community-section{min-height:calc(100svh - 120px)}.community-content h2{font-size:32px}}
.sample-pdf-button{margin-top:24px;cursor:default;max-width:100%}
/* Align the FAQ introduction with the full question list. */
@media(min-width:821px){.faq-intro{align-self:center}.faq-intro h2{margin-bottom:0}.faq-intro .eyebrow{margin-top:0}.faq-list{padding-top:0}}

/* Soft rose petals enter across the full top edge, behind the RPG text. */
.rpg-inner { position: relative; z-index: 1; }
.rpg-petals {
  --petal-drift: -50.4cqw;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  container-type: size;
  pointer-events: none;
  user-select: none;
  mask-image:
    linear-gradient(90deg, transparent 4px, #000 24px, #000 calc(100% - 24px), transparent calc(100% - 4px)),
    linear-gradient(180deg, #000 calc(100% - 28px), transparent calc(100% - 4px));
  mask-composite: intersect;
}
.rpg-petal {
  position: absolute;
  top: -20px;
  left: var(--start);
  width: var(--size);
  aspect-ratio: 34 / 42;
  opacity: .78;
  animation: rose-petal-fall var(--duration) var(--delay) linear infinite;
  animation-play-state: paused;
}
.rpg-petal::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url('assets/rose-petal.svg') center / contain no-repeat;
  transform-origin: 45% 65%;
  animation: rose-petal-flutter var(--flutter, 5.5s) var(--flutter-delay, 0s) ease-in-out infinite;
  animation-direction: var(--flutter-direction, alternate);
  animation-play-state: paused;
}
.rpg-petals.is-active .rpg-petal,
.rpg-petals.is-active .rpg-petal::before { animation-play-state: running; }
@keyframes rose-petal-fall {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(var(--petal-drift) * var(--wind, 1)), calc(100cqh + 96px), 0); }
}
@keyframes rose-petal-flutter {
  0% { transform: rotate(var(--turn)) rotateY(-48deg) rotateX(18deg); }
  50% { transform: rotate(calc(var(--turn) + 64deg)) rotateY(18deg) rotateX(-22deg); }
  100% { transform: rotate(calc(var(--turn) + 136deg)) rotateY(58deg) rotateX(24deg); }
}
/* The supplied cloud field follows the map's painted image rectangle. */
.world-map-view .world-map { z-index: -3; }
.world-map-view .world-content { position: relative; z-index: 1; }
.world-clouds {
  position: absolute;
  inset: 0;
  z-index: -2;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
}
.world-cloud-track {
  position: absolute;
  left: var(--cloud-map-left, 0px);
  top: var(--cloud-map-top, 0px);
  width: var(--cloud-map-width, 100%);
  height: var(--cloud-map-height, 100%);
  isolation: isolate;
  opacity: .8;
  animation: world-cloud-loop 100s linear infinite;
  animation-play-state: paused;
}
.world-cloud-tile {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  mask-image: linear-gradient(90deg, transparent, #000 calc(100% - var(--cloud-step, 86%)), #000 var(--cloud-step, 86%), transparent);
  mix-blend-mode: plus-lighter;
}
.world-cloud-tile:nth-child(1) { left: calc(-1 * var(--cloud-step, 86%)); }
.world-cloud-tile:nth-child(3) { left: var(--cloud-step, 86%); }
.world-cloud-tile:nth-child(4) { left: calc(var(--cloud-step, 86%) * 2); }
.world-clouds.is-ready { visibility: visible; }
.world-clouds.is-ready.is-active .world-cloud-track { animation-play-state: running; }
.ocean-glints{position:absolute;left:var(--cloud-map-left,0px);top:var(--cloud-map-top,0px);width:var(--cloud-map-width,100%);height:var(--cloud-map-height,100%);pointer-events:none}
.ocean-glint{position:absolute;width:var(--glint-size);height:var(--glint-size);opacity:0;background:radial-gradient(ellipse,#f2ffff 0%,#bbecf4 15%,transparent 65%);animation:ocean-glint-blink var(--glint-duration) var(--glint-delay) infinite ease-in-out;animation-play-state:paused}
.ocean-glint::after{content:"";position:absolute;left:-60%;top:44%;width:220%;height:1px;background:linear-gradient(90deg,transparent,#d3faff,transparent)}
.world-clouds.is-ready.is-active .ocean-glint{animation-play-state:running}
@keyframes ocean-glint-blink{0%,76%,100%{opacity:0;transform:scale(.55)}82%{opacity:var(--glint-brightness);transform:scale(1)}90%{opacity:0;transform:scale(.75)}}
@media(prefers-reduced-motion:reduce){.ocean-glints{display:none}}
@keyframes world-cloud-loop {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--cloud-step, 86%)), 0, 0); }
}
@media (max-width: 820px) {
  .rpg-petals { --petal-drift: -68.4cqw; }
  .rpg-petal:nth-child(n + 25) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rpg-petals, .world-clouds { display: none; }
}
/* Illustration thumbnails and borderless full-size artwork viewer. */
.media-content{width:100%;max-width:1440px}
.media-content>h2{margin-top:0;margin-bottom:40px;font-size:clamp(32px,5.5svh,64px);line-height:1.12;letter-spacing:-1.5px}
@media(max-width:820px),(max-height:700px){.media-content>h2{font-size:32px}}
.illustration-gallery{position:relative;isolation:isolate;display:flex;flex-wrap:nowrap;gap:24px;align-items:start;overflow-x:auto;padding-block:24px 36px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.illustration-gallery::before{content:"";position:absolute;top:50%;left:50%;width:max(100vw,1440px);height:calc((100% - 60px)*.66);transform:translate(-50%,-50%);background:#000;z-index:-1;pointer-events:none}
.illustration-thumbnail{display:block;width:100%;padding:0;border:0;background:transparent;box-shadow:0 18px 28px -10px rgba(0,0,0,.65);transition:transform .25s,box-shadow .25s}
.illustration-thumbnail{position:relative;width:220px;max-width:100%;flex:0 0 auto;border-radius:12px;overflow:hidden}
.thumbnail-art::after{content:"";position:absolute;inset:9px;border:1px solid var(--gold);border-radius:8px;pointer-events:none;mask-image:linear-gradient(117deg,#000 0%,#000 24%,rgba(0,0,0,.35) 28%,#000 32%,#000 56%,rgba(0,0,0,.4) 60%,#000 65%,#000 89%,rgba(0,0,0,.4) 93%,#000 100%);-webkit-mask-image:linear-gradient(117deg,#000 0%,#000 24%,rgba(0,0,0,.35) 28%,#000 32%,#000 56%,rgba(0,0,0,.4) 60%,#000 65%,#000 89%,rgba(0,0,0,.4) 93%,#000 100%)}
.illustration-thumbnail img{display:block;width:100%;height:380px;object-fit:cover;object-position:center}
.illustration-thumbnail:hover{transform:translateY(-4px);box-shadow:0 24px 34px -10px rgba(0,0,0,.75)}
.media-dialog{width:fit-content;max-width:92vw;max-height:94svh;padding:0;border:0;overflow:visible;background:transparent;box-shadow:0 24px 80px #0009}
.media-dialog::backdrop{background:rgba(3,10,8,.9);backdrop-filter:blur(8px)}
.dialog-body img{display:block;width:auto;height:auto;max-width:92vw;max-height:94svh;margin:0;object-fit:contain;border:0}
.dialog-close{position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--gold);border-radius:50%;background:rgba(16,21,19,.9);color:var(--gold);font-size:28px;line-height:1;transition:background .2s,color .2s}
.dialog-close:hover{background:var(--gold);color:var(--ink)}
.dialog-extension{position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:135px minmax(0,1fr) 135px;align-items:center;min-height:30px;padding:3px 10px;background:transparent;border:0;border-radius:0;isolation:isolate}
.dialog-caption{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:5px;margin:0;text-align:center;color:var(--text);font-size:13px;line-height:1.6;letter-spacing:.3px;text-transform:none}
.dialog-extension::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,var(--gold) 37px,transparent 37px,transparent 130px,var(--gold) 130px)}
.dialog-art-title{display:block;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:17px;color:var(--gold)}
.dialog-art-credit{display:block;white-space:nowrap;font-size:11px;color:var(--muted)}
.dialog-logo-backdrop{position:absolute;left:18px;top:-12px;transform:translateY(-50%);width:126px;height:80px;isolation:isolate;z-index:1}
.dialog-extension::after{content:"";position:absolute;inset:-110px 0 0;z-index:-1;pointer-events:none;background:rgba(8,12,10,.88);mask-image:linear-gradient(to bottom,transparent 110px,#000 110px),radial-gradient(ellipse 145px 90px at 81px 110px,#000 0%,rgba(0,0,0,.88) 20%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.16) 70%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 110px,#000 110px),radial-gradient(ellipse 145px 90px at 81px 110px,#000 0%,rgba(0,0,0,.88) 20%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.16) 70%,transparent 100%)}
.dialog-logo{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:600px){.illustration-thumbnail{width:180px}.illustration-thumbnail img{height:310px}.dialog-extension{grid-template-columns:75px minmax(0,1fr) 75px;padding:3px 10px;min-height:28px}.dialog-extension::before{background:linear-gradient(to right,var(--gold) 20px,transparent 20px,transparent 80px,var(--gold) 80px)}.dialog-caption{font-size:10px;line-height:1.4}
.dialog-art-title{font-size:13px}.dialog-art-credit{font-size:9px}.dialog-extension::after{mask-image:linear-gradient(to bottom,transparent 110px,#000 110px),radial-gradient(ellipse 100px 72px at 48px 110px,#000 0%,rgba(0,0,0,.88) 20%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.16) 70%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 110px,#000 110px),radial-gradient(ellipse 100px 72px at 48px 110px,#000 0%,rgba(0,0,0,.88) 20%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.16) 70%,transparent 100%)}.dialog-logo-backdrop{left:10px;width:76px;height:52px}.dialog-close{width:34px;height:34px;top:10px;right:10px}}
.dialog-caption-close{display:inline-flex;align-items:center;justify-content:center;text-align:center;position:relative;top:2px;grid-column:3;grid-row:1;align-self:center;justify-self:end;z-index:2;height:24px;padding:0 13px;border:1px solid var(--gold);border-radius:6px;background:transparent;color:var(--gold);font-size:10px;line-height:1;letter-spacing:0;transition:background 200ms,color 200ms}
.dialog-caption-close:hover,.dialog-caption-close:focus-visible{background:var(--gold);color:var(--ink)}
.dialog-caption-close>span{transform:translateY(-1px)}
.media-dialog .gallery-navigation{display:flex}.media-dialog .gallery-navigation[hidden]{display:none}.media-dialog{max-width:calc(100vw - 136px)}.media-dialog .dialog-body img{max-width:calc(100vw - 136px)}.gallery-previous{left:-60px}.gallery-next{right:-60px}@media(max-width:820px){.media-dialog{max-width:calc(100vw - 104px)}.media-dialog .dialog-body img{max-width:calc(100vw - 104px)}.gallery-previous{left:-46px}.gallery-next{right:-46px}}
.illustration-carousel{position:relative;margin-inline:56px;isolation:isolate}
.illustration-gallery{scrollbar-width:none}
.illustration-gallery::-webkit-scrollbar{display:none}
.illustration-carousel .race-arrow{display:flex}
.thumbnail-previous{left:-56px}.thumbnail-next{right:-56px}
@media(max-width:820px){.illustration-carousel{margin-inline:44px}.thumbnail-previous{left:-44px}.thumbnail-next{right:-44px}}
.illustration-gallery::before{content:none}
.illustration-carousel::before{content:"";position:absolute;top:50%;left:50%;width:100vw;height:calc((100% - 60px)*.66);transform:translate(-50%,-50%);background:#000;z-index:-1;pointer-events:none}
.illustration-gallery{scroll-snap-type:x mandatory}
.illustration-gallery .illustration-thumbnail{width:calc((100% - (var(--visible-thumbnails,1) - 1)*24px)/var(--visible-thumbnails,1));scroll-snap-align:start}
.illustration-gallery .illustration-thumbnail img{width:100%;height:auto;aspect-ratio:11/19;object-fit:cover}
@media(max-width:600px){main>.media-section{padding-block:48px}.media-content>h2{margin-bottom:20px}.illustration-carousel{width:min(280px,calc(100vw - 136px),calc((100svh - 260px)*11/19));margin-inline:auto}.illustration-gallery .illustration-thumbnail{width:100%;flex:0 0 100%}.illustration-gallery{column-gap:24px}}
.media-content{min-width:0;max-width:100%}
@media(max-width:820px){main>.media-section{grid-template-columns:minmax(0,1fr);padding-block:40px}.media-content>h2{margin-bottom:16px}.illustration-carousel{width:min(280px,calc(100vw - 136px),calc((100svh - 260px)*11/19));max-width:100%;margin-inline:auto}.illustration-gallery{min-width:0}.illustration-gallery .illustration-thumbnail{width:100%;min-width:0;flex:0 0 100%}.illustration-gallery .illustration-thumbnail img{display:block;width:100%;height:auto;aspect-ratio:11/19;object-fit:cover}}
/* Keep the World and RPG copy within the normal desktop composition on wide displays. */
@media(min-width:1601px){
  .world-map-view .world-content{margin-right:calc((100vw - 1600px)/2 + 80px)}
  .rpg-inner{max-width:1600px;margin-inline:auto}
}
.illustration-carousel .race-arrow[hidden]{display:none}
.illustration-thumbnail,.dialog-body img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.illustration-thumbnail img,.dialog-body img{-webkit-user-drag:none}
.illustration-thumbnail img{transition:filter 220ms ease}
.illustration-thumbnail:is(:hover,:focus-visible) img{filter:brightness(1.1)}
.thumbnail-credit{display:block;position:relative;margin-top:8px;padding:0 3px;background:none;color:var(--gold);font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:10px;line-height:1.4;letter-spacing:.2px;text-align:center;pointer-events:none}
@media(prefers-reduced-motion:reduce){.illustration-thumbnail img{transition:none}}

.illustration-gallery .illustration-thumbnail{overflow:visible;box-shadow:none}.illustration-gallery .illustration-thumbnail img{border-radius:12px;box-shadow:0 18px 28px -10px rgba(0,0,0,.65)}.thumbnail-art{display:block;position:relative;border-radius:12px;overflow:hidden}.illustration-gallery{scroll-snap-type:none}
.media-content>h2{margin-left:56px}
@media(max-width:820px){.media-content>h2{margin-left:calc((100% - min(280px,100vw - 136px,(100svh - 260px)*11/19))/2)}}
main>.media-section{position:relative;isolation:isolate;max-width:none;width:100%;background:url('assets/fenwood-forest.webp?v=2') center/cover no-repeat}
.illustration-carousel::before{background:rgba(194,165,116,.1);backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:0 12px 40px rgba(0,0,0,.2)}
.illustration-carousel::before{top:var(--thumbnail-center,50%);height:calc(var(--thumbnail-height,380px)*.66)}.illustration-carousel>.race-arrow{top:var(--thumbnail-center,50%)}

.community-shade{background:none}
.community-content{width:min(100%,1080px);padding:80px 32px 48px}
.community-content h2{font-size:clamp(32px,5.5svh,64px);line-height:1.12;margin:18px 0 24px}
.community-content>.eyebrow{color:var(--gold)}
.community-content .community-lead{max-width:850px;margin:0 auto 30px;font-size:16px;color:var(--text)}
.community-signup{display:flex;gap:14px;max-width:820px;margin:0 auto;align-items:stretch}
.community-signup input{min-width:0;flex:1;border:1px solid var(--gold);border-radius:6px;padding:14px 20px;background:rgba(16,21,19,.72);color:var(--text);font:inherit;font-size:14px;outline-offset:4px}
.community-signup input::placeholder{color:var(--muted)}
.community-signup .button{margin:0;border-radius:6px}
.community-content .signup-note{margin:12px 0 32px;font-size:12px;font-style:italic;color:var(--muted)}
.community-paths{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:32px 0 36px;border-block:1px solid var(--line)}
.community-path-icon{display:block;color:var(--gold);font-size:30px;line-height:1.2}
.community-path h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:26px;color:var(--gold);margin:14px 0}
.community-path p{font-size:14px;line-height:1.75;color:var(--text);max-width:370px;margin:0 auto 18px}
.community-text-link{display:inline-flex;align-items:center;gap:12px;color:var(--gold);font-size:13px;transition:color 200ms}
.community-text-link:hover{color:var(--text)}
.community-text-link .button-arrow{width:18px;height:12px}
.community-socials{display:flex;justify-content:center;gap:30px;padding-top:32px}
.community-socials a{display:block;width:40px;height:40px;background:var(--gold);mask:var(--social-image) center/contain no-repeat;-webkit-mask:var(--social-image) center/contain no-repeat;transition:background 200ms,transform 200ms}
.community-socials a:hover{background:var(--text);transform:translateY(-3px)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:820px){.community-content{padding:56px 24px 40px}.community-content h2{font-size:32px}.community-paths{gap:24px}.community-path h3{font-size:22px}}
@media(max-width:520px){.community-paths{grid-template-columns:1fr;gap:32px}.community-signup{flex-direction:column}.community-socials{gap:24px}.community-socials a{width:36px;height:36px}}
.community-content{padding:clamp(24px,4svh,42px) 32px}
.community-content>.eyebrow{margin:0}
.community-content h2{font-size:clamp(30px,4.5svh,52px);margin:12px 0 16px}
.community-content .community-lead{font-size:14px;line-height:1.6;margin-bottom:20px}
.community-signup{margin-bottom:24px}
.community-paths{padding:22px 0;gap:24px}
.community-path h3{margin:8px 0;font-size:24px}
.community-path p{max-width:none;font-size:14px;line-height:1.6;margin-bottom:12px}
.community-path-icon{font-size:26px;line-height:1}
.community-path-icon svg{width:26px;height:26px}
.community-socials{padding-top:24px;gap:32px}
.community-socials a{width:48px;height:48px}
@media(max-width:520px){.community-content{padding:24px 16px}.community-content h2{font-size:30px}.community-paths{grid-template-columns:1fr 1fr;gap:12px;padding:16px 0}.community-path h3{font-size:19px}.community-path p{font-size:clamp(9px,2.4vw,12px)}.community-text-link{font-size:11px;gap:5px}.community-signup{flex-direction:row;gap:8px;margin-bottom:18px}.community-signup input{padding:10px;font-size:12px}.community-signup .button{padding:10px;font-size:10px;min-height:40px}.community-socials{padding-top:18px;gap:24px}.community-socials a{width:42px;height:42px}}
@media(max-height:700px){.community-content{padding-block:18px}.community-content h2{font-size:30px;margin:8px 0 12px}.community-content .community-lead{margin-bottom:14px}.community-signup{margin-bottom:16px}.community-paths{padding-block:14px}.community-socials{padding-top:16px}.community-path h3{margin-block:6px}.community-path p{margin-bottom:8px}}
.community-socials a{background:none;mask:none;-webkit-mask:none;color:var(--gold);transition:color 200ms,transform 200ms}
.community-socials a:hover{background:none;color:var(--text)}
.community-socials svg{display:block;width:100%;height:100%}
.community-socials{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;width:min(100%,720px);margin-inline:auto}
.community-socials a{position:relative;justify-self:stretch;width:auto;height:48px;display:flex;align-items:center;justify-content:center}
.community-socials svg{width:48px;height:48px}
.community-socials a+a{border:0}
@media(max-width:520px){.community-socials a{width:auto;height:42px}.community-socials svg{width:42px;height:42px}}
.community-moonbel-logo{display:block;width:30px;height:30px;object-fit:contain;margin-inline:auto}
main h2,main h2 em{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;color:var(--gold)}
.illustration-gallery .illustration-thumbnail,.illustration-gallery .thumbnail-art,.illustration-gallery .illustration-thumbnail img,.illustration-gallery .thumbnail-art::after{border-radius:0}

.faq-item{background:rgba(0,0,0,.24);padding:18px 20px;border-bottom:1px solid var(--line)}.faq-item:first-child{border-top:1px solid var(--line)}.faq-question{margin:0 0 12px;font-size:14px;font-weight:400;line-height:1.5}.faq-item p{margin:0;font-size:13px;line-height:1.7;color:var(--muted)}.site-footer.legal-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;padding:28px clamp(24px,5vw,80px);background:var(--ink);border-top:0}
.footer-brand{display:flex;flex-direction:column;align-items:center;gap:12px}
.footer-brand img{width:110px;height:74px;object-fit:contain}
.footer-brand>span{font-size:11px;color:var(--muted)}
.footer-legal{display:flex;align-items:center;gap:24px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gold)}
.footer-legal:first-child{justify-content:flex-start}.footer-legal:last-child{justify-content:flex-end}
.footer-legal:first-child::after,.footer-legal:last-child::before{content:"";height:1px;background:var(--line);flex:1}
@media(max-width:520px){.site-footer.legal-footer{gap:14px;padding:24px 16px}.footer-legal{font-size:9px;letter-spacing:.3px;gap:8px}.footer-brand img{width:80px;height:56px}.footer-brand>span{font-size:9px;max-width:100px}}
.faq-intro .faq-introduction{margin:20px 0 0;color:var(--text);font-size:14px;line-height:1.75}
.community-path-icon svg,.community-moonbel-logo{width:48px;height:48px}.community-path-icon{display:flex;align-items:center;justify-content:center;min-height:48px}
.site-footer.legal-footer{display:flex;flex-direction:column;gap:16px}
.legal-footer .footer-brand{width:100%;flex-direction:row;gap:32px}
.legal-footer .footer-brand::before,.legal-footer .footer-brand::after{content:"";flex:1;height:1px;background:var(--line)}
.footer-bottom{display:flex;align-items:center;justify-content:center;gap:32px;width:100%;flex-wrap:wrap}
.footer-copyright{color:var(--muted);font-size:11px}
.footer-bottom .footer-legal{font-size:11px;flex:none}
.footer-bottom .footer-legal::before,.footer-bottom .footer-legal::after{content:none}
@media(max-width:520px){.footer-bottom{gap:10px 14px}.footer-bottom .footer-legal,.footer-copyright{font-size:9px}.footer-bottom .footer-legal{letter-spacing:0}.site-footer.legal-footer{padding-inline:10px}}
.footer-bottom .footer-legal{font-family:Arial,Helvetica,sans-serif;font-size:11px;font-weight:700;font-style:normal;letter-spacing:1.2px;text-transform:uppercase;color:var(--text);transition:color 200ms}.footer-bottom .footer-legal:hover{color:var(--gold)}
/* Center the complete community content below the fixed navigation. */
main>.community-section{min-height:calc(100svh - 64px);padding:24px 0;box-sizing:border-box;align-items:center}
.community-content{padding-block:16px}
@media(max-width:820px){main>.community-section{min-height:calc(100svh - 76px);padding:20px 0}.community-content{padding-block:12px}}
@media(max-height:700px){main>.community-section{padding-block:16px}.community-content{padding-block:8px}.community-content h2{font-size:28px;margin:6px 0 10px}.community-content .community-lead{font-size:13px;margin-bottom:12px}.community-signup{margin-bottom:12px}.community-signup .button{min-height:40px;padding-block:10px}.community-signup input{padding-block:10px}.community-paths{padding-block:12px}.community-path-icon,.community-path-icon svg,.community-moonbel-logo{min-height:36px;width:36px;height:36px}.community-path-icon{width:100%}.community-path h3{font-size:22px;margin-block:6px}.community-path p{font-size:12px;line-height:1.5;margin-bottom:8px}.community-socials{padding-top:12px}.community-socials a,.community-socials svg{height:38px}.community-socials svg{width:38px}}
main>.community-section{height:var(--community-available,auto);min-height:0;padding-block:12px}
.community-content{padding-block:8px}
.footer-bottom .footer-legal{color:var(--muted)}.faq-intro .faq-introduction{font-size:clamp(13px,1.6svh,18px);line-height:1.75;color:#edece4}@media(max-width:820px){.faq-intro .faq-introduction{font-size:13.5px;line-height:1.7}}@media(max-height:700px){.faq-intro .faq-introduction{font-size:13px;line-height:1.6}}
.policy-dialog{width:min(800px,92vw);max-height:85svh;padding:0;border:1px solid var(--gold);border-radius:8px;background:var(--ink);color:var(--text);overflow:hidden;box-shadow:0 24px 80px #0009}
.policy-dialog::backdrop{background:rgba(3,10,8,.8)}
.policy-toolbar{display:flex;justify-content:flex-end;padding:12px 18px;border-bottom:1px solid var(--line)}
.policy-close{border:1px solid var(--gold);border-radius:6px;padding:7px 18px;background:transparent;color:var(--gold);font-size:12px;transition:background 200ms,color 200ms}
.policy-close:hover{background:var(--gold);color:var(--ink)}
.policy-content{max-height:calc(85svh - 60px);overflow-y:auto;overscroll-behavior:contain;padding:24px 32px 32px;scrollbar-width:thin;scrollbar-color:var(--gold) var(--ink)}
.policy-content h2{margin:0 0 18px;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;color:var(--gold);font-size:32px;line-height:1.2}
.policy-content h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:var(--gold);font-size:22px;margin:26px 0 12px}
.policy-content p,.policy-content li{font-size:14px;line-height:1.75}.policy-content p{margin:0 0 16px}.policy-content ul{padding-left:24px;margin-bottom:18px}
@media(max-width:520px){.policy-content{padding:20px}.policy-content h2{font-size:28px}}
.community-signup input,.community-signup .button{border-radius:0}
/* Use sharp corners consistently throughout the site. */
*,*::before,*::after{border-radius:0!important}
.legal-footer .footer-brand{gap:0}
.site-footer.legal-footer{width:100%;margin:0;border-top:1px solid var(--line);padding:20px 24px;gap:0}
.media-content>h2{margin-bottom:20px}
.art-introduction{margin:0 0 24px 56px;font-size:clamp(13px,1.6svh,18px);line-height:1.75;color:#edece4}
@media(max-width:820px){.art-introduction{margin-left:calc((100% - min(280px,100vw - 136px,(100svh - 260px)*11/19))/2);font-size:13.5px;line-height:1.7}}
@media(max-height:700px){.art-introduction{font-size:13px;line-height:1.6}}
.community-socials{grid-template-columns:repeat(3,minmax(0,1fr))}
.community-path{position:relative}.community-path .community-text-link::after{content:"";position:absolute;inset:0;z-index:1}.community-path:has(.community-text-link:focus-visible){outline:2px solid var(--gold);outline-offset:6px}
.community-path{width:max-content;max-width:100%;justify-self:center}
.community-signup input:focus,.community-signup input:focus-visible{outline:none;box-shadow:none;border-color:var(--gold)}
@media(max-width:820px){
 .race-card .race-info,.race-card.is-expanded .race-info{top:auto;bottom:24px;left:32px;right:32px;width:auto;height:auto!important;transform:none;max-height:none}
 .race-card .origin-copy,.race-card .origin-copy:has(.alrian-description){width:auto;transform:none;font-size:16px}
 .origin-copy .race-description{font-size:16px;line-height:1.7;max-width:none}
 .origin-copy h3{font-size:36px;margin-bottom:14px}
 .race-card.is-expanded .race-shade{background:linear-gradient(to bottom,transparent 25%,rgba(3,9,6,.25) 48%,rgba(3,9,6,.9) 78%,rgba(3,9,6,.96))}
 .illustration-gallery{touch-action:pan-y;overflow-x:hidden}
 .footer-bottom{display:grid;grid-template-columns:auto auto;gap:12px 24px;justify-content:center}
 .footer-copyright{grid-column:1/-1;grid-row:1;text-align:center}
 .footer-bottom .footer-legal:first-child{grid-row:2;grid-column:1;justify-self:end}
 .footer-bottom .footer-legal:last-child{grid-row:2;grid-column:2;justify-self:start}
}
.faq-list .faq-item{padding:0 20px;overflow:hidden}
.faq-list .faq-item summary{padding:18px 0;align-items:flex-start;gap:20px}
.faq-list .faq-question{margin:0;font-size:14px;line-height:1.5}
.faq-list .faq-item p{margin:0;padding:0 0 18px;font-size:13px;line-height:1.7}
.faq-arrow{flex-shrink:0;margin-top:3px;color:var(--gold);transition:transform .3s}
.faq-item[data-expanded="true"] .faq-arrow{transform:rotate(180deg)}
.reveal{overflow-anchor:none}
.video-playback-host{position:relative}
.video-play-fallback{position:absolute;z-index:15;left:50%;top:40%;transform:translate(-50%,-50%);padding:12px 20px;border:1px solid var(--gold);background:rgba(16,21,19,.9);color:var(--gold);font-size:13px;white-space:nowrap}
.video-play-fallback[hidden],.race-card:not(.is-expanded)>.video-play-fallback{display:none}
.hero-video.user-started-video{visibility:visible!important}
@media(max-width:820px),(hover:none){
 #origins .race-card .race-info,#origins .race-card.is-expanded .race-info{inset:auto 28px 28px!important;width:auto!important;height:auto!important;transform:none!important;max-height:none}
 #origins .race-card .origin-copy,#origins .race-card .origin-copy:has(.alrian-description){display:block;width:auto!important;transform:none!important}
 #origins .origin-copy .race-description{font-size:18px!important;line-height:1.65;max-width:none}
 #origins .origin-copy h3{font-size:38px!important;margin-bottom:12px}
 #origins .race-card.is-expanded .race-shade{background:linear-gradient(to bottom,transparent 25%,rgba(3,9,6,.15) 45%,rgba(3,9,6,.88) 72%,rgba(3,9,6,.97))}
}
.companion-copy .button .play-icon{display:block;flex:0 0 auto;width:0;height:0;padding:0;border:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid #000;background:none;font-size:0;line-height:0;align-self:center}
@media(min-width:1200px){main>.faq-section{grid-template-columns:minmax(640px,660px) minmax(0,700px);gap:40px;padding-inline:32px}}
/* Use the same heading and body scale as the world, RPG and artwork sections. */
.faq-intro h2{font-size:clamp(32px,5.5svh,64px);line-height:1.12;letter-spacing:-1.5px}
.faq-intro p.faq-introduction,.origins-section .race-lore{font-family:Arial,Helvetica,sans-serif;font-size:clamp(13px,1.6svh,18px);font-weight:400;line-height:1.75;color:#edece4}
.faq-intro-line{display:inline;white-space:normal}
@media(max-width:820px),(max-height:500px){
 .media-dialog.is-photo-view{position:fixed;inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;background:#000;box-shadow:none;border:0;outline:none;color-scheme:dark;overflow:hidden;overscroll-behavior:none;scrollbar-width:none}
 .media-dialog.is-photo-view:focus,.media-dialog.is-photo-view:focus-visible{outline:none}
 .media-dialog.is-photo-view::-webkit-scrollbar,.media-dialog.is-photo-view .dialog-body::-webkit-scrollbar{display:none;width:0;height:0}
 .media-dialog.is-photo-view .dialog-body{width:100%;height:100%;display:flex;align-items:center;justify-content:center;touch-action:none;overflow:hidden;cursor:grab}
 .media-dialog.is-photo-view .dialog-body:active{cursor:grabbing}
 .media-dialog.is-photo-view .dialog-body img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
 .media-dialog.is-photo-view .gallery-navigation{display:none}
 .media-dialog.is-photo-view .dialog-extension{inset:auto 0 0;display:block;min-height:54px;padding:10px 16px calc(12px + env(safe-area-inset-bottom));pointer-events:none}
 .media-dialog.is-photo-view .dialog-extension::before{display:block;background:linear-gradient(to right,var(--gold) 24px,transparent 24px,transparent 104px,var(--gold) 104px)}
 .media-dialog.is-photo-view .dialog-extension::after{display:block;mask-image:linear-gradient(to bottom,transparent 110px,#000 110px),radial-gradient(ellipse 108px 76px at 62px 110px,#000 0%,rgba(0,0,0,.88) 20%,rgba(0,0,0,.5) 45%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 110px,#000 110px),radial-gradient(ellipse 108px 76px at 62px 110px,#000 0%,rgba(0,0,0,.88) 20%,rgba(0,0,0,.5) 45%,transparent 100%)}
 .media-dialog.is-photo-view .dialog-logo-backdrop{display:block;left:16px;top:-10px;width:92px;height:62px}
 .media-dialog.is-photo-view .dialog-caption{position:static;inset:auto;padding:0;background:none;font-size:12px}
 .media-dialog.is-photo-view .is-caption-stacked .dialog-caption{flex-direction:column;align-items:center;padding-top:24px;row-gap:2px}
 .media-dialog.is-photo-view .dialog-art-credit{white-space:normal}
 .media-dialog.is-photo-view .dialog-caption-close{position:fixed;top:calc(12px + env(safe-area-inset-top));right:16px;min-width:60px;height:44px;background:rgba(0,0,0,.6);color:var(--gold);pointer-events:auto;font-size:12px}
 .media-dialog.is-photo-view .dialog-caption-close:is(:hover,:focus-visible){background:var(--gold);color:var(--ink)}
 .media-dialog.is-photo-view .dialog-caption-close>span{display:block;transform:none;color:inherit;-webkit-text-fill-color:currentColor}
}
@media(min-width:1200px){.faq-intro-line{display:block}}
@media(max-width:820px){.faq-intro h2{font-size:32px}.faq-intro p.faq-introduction,.origins-section .race-lore{font-size:13.5px;line-height:1.7}}
@media(max-height:700px){.faq-intro h2{font-size:32px}.faq-intro p.faq-introduction,.origins-section .race-lore{font-size:13px;line-height:1.6}}
main>.media-section{overflow-x:clip}
/* Keep the existing control borders, without an extra focus outline outside them. */
button:focus,a:focus,summary:focus,input:focus,[tabindex]:focus{outline:none}
.hero-pattern-glint{opacity:.6}
/* Keep the autoplay surface in a normal, visible compositor layer. */
.hero-video{z-index:0}
.hero-shade{z-index:1;pointer-events:none}
.hero-pattern-layer{z-index:2}
.hero .scroll-cue{z-index:3}