.world-map-view { position: relative; isolation: isolate; display: grid; align-items: center; min-height: inherit; }
.world-map-view[hidden], .race-view[hidden], .races-open[hidden] { display: none; }
.world-content .races-open { margin-top: 34px; }
.world-section.is-race-view { min-height: 0; padding-top: 0; }
.race-view { width: 100%; background: #080c0b; }
.race-intro { padding: 46px var(--gutter) 34px; display: grid; grid-template-columns: 1fr; gap: 18px 36px; align-items: center; }
.race-intro .eyebrow { margin: 0 0 14px; }
.race-intro h2 { margin: 0; font-size: clamp(34px, 3.2vw, 58px); letter-spacing: -1px; }
.race-intro h2:focus { outline: none; }
.race-back { margin: 0; background: none; color: var(--text); white-space: nowrap; }
.race-return { display: flex; justify-content: center; padding: 0 var(--gutter) 34px; }
.race-lore { grid-column: 1 / -1; margin: 0; max-width: 850px; font-size: 14px; line-height: 1.8; color: #afb5ad; }
.race-viewport { position: relative; height: clamp(530px, 42vw, 780px); overflow: hidden; isolation: isolate; touch-action: pan-y; background: #020403; }
.race-track { position: absolute; inset: 0; }
.race-card { --race-slant: 26px; position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; background: #030504; clip-path: polygon(var(--race-slant) 0, 100% 0, calc(100% - var(--race-slant)) 100%, 0 100%); transition: width 500ms cubic-bezier(.22,.7,.2,1), transform 500ms cubic-bezier(.22,.7,.2,1); }
.race-card.is-recycling { transition: none; }
.race-card.is-selected { z-index: 2; }
.race-still, .race-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; max-width: none; }
.race-still { filter: none; }
.race-video { opacity: 0; transition: opacity 600ms; }
.race-card.is-playing .race-video { opacity: 1; }
.race-card.is-expanded .race-still { filter: none; }
.race-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2,7,5,.92), transparent 45%); pointer-events: none; transition: background 500ms; }
.race-card.is-expanded .race-shade { background: linear-gradient(90deg, transparent 25%, rgba(4,10,7,.35) 42%, rgba(4,10,7,.85) 72%, rgba(4,10,7,.94)), linear-gradient(0deg, rgba(2,7,5,.75), transparent 35%); }
.race-select { cursor: pointer; position: absolute; inset: 0; z-index: 3; padding: 0; border: 0; background: none; }
.race-select:focus-visible { outline: 2px solid var(--gold); outline-offset: -18px; }
.race-info { position: absolute; z-index: 4; right: var(--race-info-right); top: 50%; width: var(--race-info-width); max-height: calc(100% - 90px); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-50%); pointer-events: none; transition: opacity 200ms, visibility 200ms; }
.race-card.is-expanded .race-info { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%); transition-delay: 450ms; }
.race-info .eyebrow { font-size: 8px; letter-spacing: 2px; margin: 0 0 20px; }
.race-info h3 { margin: 0 0 25px; font-family: Georgia, 'Times New Roman', serif; color: #e1c18d; font-weight: 400; font-size: clamp(38px, 4.4vw, 76px); line-height: 1.05; }
.race-description { margin: 0; font-size: 16px; line-height: 1.85; color: #e8e9df; text-shadow: 0 1px 10px #0008; }
.race-divider { position: absolute; z-index: 5; top: 0; right: 0; width: var(--race-slant); height: 100%; pointer-events: none; overflow: visible; }
.race-divider line { stroke: rgba(194,165,116,.7); stroke-width: 1.5; }
.race-coming-message { position: absolute; top: 36px; left: 29px; right: 28px; margin: 0; color: #a89d84; text-transform: uppercase; letter-spacing: 1.5px; font-size: 9px; line-height: 1.9; }
.race-arrow { position: absolute; z-index: 10; top: 50%; transform: translateY(-50%); width: 44px; height: 58px; border: 1px solid #c2a57466; background: #080e0bcc; backdrop-filter: blur(8px); display: grid; place-items: center; padding: 0; color: #e5cfa7; font-family: Georgia, serif; font-size: 40px; line-height: 1; transition: background 200ms; }
.race-arrow:hover { background: #30382d; }
.race-previous { left: 16px; }
.race-next { right: 16px; }
.race-toolbar { display: flex; align-items: center; gap: 24px; padding: 20px var(--gutter) 24px; color: #9bA497; font-size: 10px; letter-spacing: .6px; }
.race-help, .race-status { margin: 0; line-height: 1.6; }
.race-status { margin-left: auto; color: #c5b18c; }
.race-reset { background: none; border-bottom: 1px solid #c2a57466; padding: 8px 0; color: #dac49c; font-size: 10px; white-space: nowrap; }
.race-reset span { margin-left: 10px; }
@media (max-width: 1100px) and (min-width: 821px) {
  .race-intro { padding-inline: 40px; }
  .race-info h3 { font-size: 44px; }
  .race-description { font-size: clamp(11px, 2.9vw, 13px); line-height: 1.65; }
  .race-coming-message { left: 24px; right: 22px; letter-spacing: .7px; font-size: 8px; }
}
@media (max-width: 820px) {
  .world-section { padding-top: 0; }
  .world-map-view { min-height: 0; padding-top: clamp(230px, 43vw, 340px); }
  .race-intro { padding: 30px var(--gutter) 25px; grid-template-columns: 1fr; gap: 18px; }
  .race-intro h2 { font-size: clamp(34px, 6vw, 48px); }
  .race-back { font-size: 9px; }
  .race-lore { font-size: 13px; line-height: 1.8; }
  .race-viewport { height: clamp(550px, 73svh, 760px); }
  .race-card { --race-slant: 14px; }
  .race-card.is-expanded .race-shade { background: linear-gradient(90deg, transparent 15%, rgba(3,9,6,.35) 36%, rgba(3,9,6,.88) 66%, rgba(3,9,6,.96)); }
  .race-info { top: 50%; left: auto; right: var(--race-info-right); width: var(--race-info-width); bottom: auto; transform: translateY(-50%); max-height: calc(100% - 70px); }
  .race-card.is-expanded .race-info { transform: translateY(-50%); }
  .race-info .eyebrow { font-size: 6px; letter-spacing: 1px; margin-bottom: 12px; }
  .race-info h3 { font-size: clamp(24px, 6vw, 34px); margin-bottom: 16px; }
  .race-description { font-size: clamp(11px, 2.9vw, 13px); line-height: 1.65; }
  .race-arrow { width: 36px; height: 54px; background: #080e0be6; }
  .race-previous { left: 7px; }
  .race-next { right: 7px; }
  .race-coming-message { left: 28px; right: 28px; top: 38px; font-size: 10px; }
  .race-toolbar { padding: 18px var(--gutter) 26px; flex-wrap: wrap; gap: 10px; }
  .race-help, .race-reset { display: none; }
  .race-status { margin: 0; text-align: center; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .race-card, .race-info, .race-video, .race-still { transition: none; }
}
/* Keep each label aligned to its own slanted panel. */
.race-name{position:absolute;z-index:6;left:calc(var(--race-slant) / 2 + 6px);right:calc(var(--race-slant) / 2 + 6px);bottom:24px;margin:0;color:#e1c18d;font-size:clamp(9px,1vw,13px);font-weight:700;letter-spacing:1px;text-align:center;line-height:1.4;white-space:nowrap;pointer-events:none}
.race-card.is-expanded .race-name{opacity:0}
.race-card .race-coming-message{top:50%;left:50%;right:auto;bottom:auto;width:max-content;margin:0;writing-mode:vertical-rl;text-orientation:mixed;transform:translate(-50%,-50%) rotate(var(--race-lean-angle));font-size:11px;line-height:1.4;font-weight:700;letter-spacing:1.5px;text-align:center;white-space:nowrap}
.race-divider{shape-rendering:geometricPrecision;transform:translateZ(0)}
.race-divider line{stroke-linecap:round;stroke-linejoin:round;filter:blur(.15px)}
.race-card.is-coming-soon{backface-visibility:hidden}
.race-arrow{display:none;align-items:center;justify-content:center;line-height:0}
.race-arrow .button-arrow{display:block;margin:0}
@media(max-width:820px){.race-arrow{display:flex}.race-name{bottom:24px;font-size:12px}}
/* Keep the world/race action arrows proportional to their button labels. */
.races-open .button-arrow,.race-back .button-arrow{width:18px;height:12px}
/* Preserve the original side chevrons and center their visible glyphs. */
.race-chevron{display:block;font-family:Georgia,serif;font-size:40px;line-height:1;transform:translateY(-2px)}
.race-toolbar{justify-content:flex-end}
/* Smaller origin titles and lore; preserve The Peoples of Aedar label. */
.race-info h3{font-size:clamp(32px,3.7vw,64px)}
.race-description{font-size:14px}
@media(max-width:1100px) and (min-width:821px){.race-info h3{font-size:38px}.race-description{font-size:clamp(10px,2.5vw,12px)}}
@media(max-width:820px){.race-info h3{font-size:clamp(22px,5.2vw,29px)}.race-description{font-size:clamp(10px,2.6vw,12px)}}
/* Match the bottom labels to the origin headings and mirror the coming-soon copy. */
.race-name{font-family:Georgia,'Times New Roman',serif;font-weight:400}
.race-card .race-coming-message{transform:translate(-50%,-50%) rotate(var(--race-lean-angle)) scaleX(-1)}
/* Reverse the vertical reading direction without mirroring the letterforms. */
.race-card .race-coming-message{transform:translate(-50%,-50%) rotate(calc(180deg + var(--race-lean-angle)))}
/* Center labels on the bottom edge of each parallelogram, not its full box. */
.race-name{left:6px;right:calc(var(--race-slant) + 6px);font-size:clamp(12px,1.15vw,16px)}
@media(max-width:820px){.race-name{font-size:14px}}
/* Origin interaction and typography. */
.race-name,.race-coming-message{-webkit-user-select:none;user-select:none}
.race-name{font-style:italic;transition:transform 450ms ease,opacity 300ms ease}
.race-still{transition:none}
@media(hover:hover){.race-card:not(.is-expanded):hover::before{opacity:0}.race-card:not(.is-expanded):hover .race-name{transform:translateY(-12px)}}
.race-info h3{font-family:Georgia,'Times New Roman',serif;font-size:clamp(42px,4.6vw,78px);font-style:italic;font-weight:400;letter-spacing:-2px}
.race-return{justify-content:flex-end;padding:0 var(--gutter) 16px}
.race-back{border:1px solid #c2a57466;padding:14px 20px;margin:0;gap:18px;min-height:46px;transition:background 250ms}
.race-back:hover{background:#c2a57415}
.race-toolbar{padding:12px var(--gutter);gap:0}
.race-reset{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:160px;min-height:76px;padding:12px 22px;border:1px solid #c2a57466;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;transition:background 300ms}
.race-reset:hover{background:#c2a57410}
.race-reset .origin-reset-arrows{display:flex;align-items:center;justify-content:center;gap:0;margin:0;line-height:1;font-size:24px;letter-spacing:0}
.race-reset .origin-reset-arrows span{display:block;margin:0;transition:transform 400ms ease}
.race-reset:hover .origin-reset-arrows span:first-child{transform:translateX(-5px)}
.race-reset:hover .origin-reset-arrows span:last-child{transform:translateX(5px)}
@media(max-width:820px){.race-info h3{font-size:42px}.race-toolbar{padding:10px var(--gutter)}.race-reset{display:flex;min-width:145px;min-height:70px}.race-viewport:not(.has-selection) .race-name{font-size:7px;letter-spacing:0;left:0;right:var(--race-slant)}.race-return{padding-bottom:14px}.race-back{font-size:9px}}
@media(prefers-reduced-motion:reduce){.race-name,.race-still,.origin-reset-arrows span{transition:none!important}}
.race-info h3{-webkit-user-select:none;user-select:none}
/* Keep the map control beside the introduction and the overview control close below. */
.race-intro{grid-template-columns:minmax(0,1fr) auto;gap:18px 32px;padding-bottom:16px}
.race-intro>div:first-child{grid-column:1/-1}
.race-intro .race-lore{grid-column:1;grid-row:2}
.race-intro .race-return{grid-column:2;grid-row:2;align-self:center;padding:0}
.race-toolbar{justify-content:center;padding:6px var(--gutter)}
.race-reset{min-height:46px;min-width:150px;padding:7px 18px;gap:2px;font-size:11px}
.race-reset .origin-reset-arrows{font-size:19px}
@media(max-width:820px){.race-intro{grid-template-columns:1fr;gap:12px;padding-bottom:12px}.race-intro .race-lore{grid-column:1;grid-row:2}.race-intro .race-return{grid-column:1;grid-row:3;justify-self:end;padding:0}.race-toolbar{padding:6px var(--gutter)}.race-reset{min-height:44px;min-width:140px;padding:6px 16px;gap:2px}}
/* Shorten the control while preserving the existing bottom frame height. */
.race-toolbar{min-height:58px}
.race-reset{height:36px;min-height:36px;padding:3px 18px;gap:0}
.race-reset .origin-reset-arrows{font-size:15px}
/* A straight gold leading edge fading rightward along the panel's slant. */
.origin-divider-shadow{position:absolute;z-index:5;left:0;top:0;bottom:0;width:14px;transform:skewX(calc(-1 * var(--race-lean-angle)));transform-origin:left bottom;background:linear-gradient(90deg,rgba(194,165,116,.48),rgba(194,165,116,.16) 35%,rgba(194,165,116,0) 100%);pointer-events:none}
@media(max-width:820px){.race-toolbar{min-height:56px}.race-reset{height:36px;min-height:36px;padding:3px 16px;gap:0}}
/* Share one responsive title size between Aedar and the expanded origin names. */
.race-view{--origin-title-size:clamp(34px,3.2vw,58px)}
.race-intro h2,.race-info h3{font-size:var(--origin-title-size)}
@media(max-width:820px){.race-view{--origin-title-size:clamp(34px,6vw,48px)}}
/* Give map/origin navigation a gentle directional hover response. */
.races-open .button-arrow,.race-back .button-arrow{transition:transform 400ms ease}
.races-open:is(:hover,:focus-visible) .button-arrow{transform:translateX(5px)}
.race-back:is(:hover,:focus-visible) .button-arrow{transform:translateX(-5px) rotate(180deg)}
/* Broader and softer gold separation between coming-soon panels. */
.origin-divider-shadow{width:22px;background:linear-gradient(90deg,rgba(194,165,116,.29),rgba(194,165,116,.12) 30%,rgba(194,165,116,.035) 65%,rgba(194,165,116,0) 100%)}
@media(prefers-reduced-motion:reduce){.races-open .button-arrow,.race-back .button-arrow{transition:none}}
/* Further soften the gold dividers and leave the Alrians' left edge clear. */
.origin-divider-shadow{background:linear-gradient(90deg,rgba(194,165,116,.20),rgba(194,165,116,.075) 30%,rgba(194,165,116,.02) 65%,transparent 100%)}
.race-card[data-index="0"] .origin-divider-shadow{display:none!important}
.race-description{max-width:36ch;text-wrap:pretty}

/* Fade a dimming layer instead of filtering and rerasterizing the source image. */
.race-card::before{content:"";position:absolute;inset:0;z-index:1;background:#000;opacity:.18;pointer-events:none;transition:opacity 450ms ease}
.race-card.is-expanded::before{opacity:0}
@media(prefers-reduced-motion:reduce){.race-card::before{transition:none}}
/* Match the origin dividers' soft gold fade instead of outlining these controls. */
.race-back,.race-reset{border:0;position:relative;isolation:isolate}
.race-back::before,.race-reset::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(194,165,116,.20),rgba(194,165,116,.075) 30%,rgba(194,165,116,.02) 65%,transparent 100%)}
/* Short, matching gold fades on both sides of All Origins. */
.race-reset::before{background:linear-gradient(90deg,rgba(194,165,116,.16) 0%,rgba(194,165,116,.055) 12%,transparent 28%,transparent 72%,rgba(194,165,116,.055) 88%,rgba(194,165,116,.16) 100%)}
/* Scale a fixed text layout on narrow screens rather than reflowing its words. */
.origin-copy{display:contents}
@media(max-width:820px){
 .race-card.is-expanded .race-shade{background:linear-gradient(90deg,transparent 34%,rgba(3,9,6,.25) 50%,rgba(3,9,6,.86) 80%,rgba(3,9,6,.95))}
 .origin-copy{display:block;width:36ch;font-size:14px;transform:scale(var(--origin-copy-scale,1));transform-origin:top left}
 .origin-copy .race-description{font-size:14px;line-height:1.85;max-width:none}
 .origin-copy h3{font-size:46.08px;margin-bottom:25px}
 .origin-copy .eyebrow{font-size:8px;letter-spacing:2px;margin-bottom:20px}
}
/* Narrow layouts keep one origin open and offer the map return beneath it. */
@media(max-width:820px){.race-intro .race-return,.race-toolbar .race-reset{display:none}.race-toolbar .race-back{display:inline-flex}.race-select{cursor:default}}
/* Keep origin descriptions fully visible without an internal scrolling area. */
.race-info{overflow:visible;max-height:none}
@media(max-width:820px){.race-info{overflow:visible;max-height:none}}

.world-section:not(.is-race-view) { min-height: 0; margin-bottom: 0; }
.world-map-view { height: 100svh; min-height: 0; padding-top: 0; overflow: hidden; }
.world-map-view .world-map { inset: auto; top: 0; left: 50%; width: auto; height: 100%; max-width: none; object-fit: contain; object-position: center; transform: translateX(-50%); }
.world-map-view .world-content { padding-block: 80px 120px; }
.world-scroll-cue { top: auto; bottom: 66px; height: 24px; z-index: 6; }
.world-scroll-cue .scroll-triangle { top: calc(100% + 8px); }
@media (min-width: 821px) {
  main > section { min-height: 100svh; scroll-margin-top: 0; }
  .world-section:not(.is-race-view) { height: 100svh; }
}
@media (max-width: 820px) {
  .world-map-view .world-content { padding: 76px var(--gutter) 110px; }
  .world-map-view .world-shade { background: linear-gradient(90deg, rgba(8,16,13,.60), rgba(8,16,13,.88)), linear-gradient(0deg, #10151388, transparent 70%); }
  .world-map-view .world-content .eyebrow { margin-bottom: 12px; }
  .world-map-view .world-content h2 { font-size: 32px; margin-bottom: 20px; }
  .world-map-view .world-overview { font-size: 13.5px; line-height: 1.7; }
  .world-map-view .races-open { margin-top: 24px; }
}
@media (max-height: 700px) {
  .world-map-view .world-content { padding-top: 60px; padding-bottom: 100px; }
  .world-map-view .world-content h2 { font-size: 32px; margin-bottom: 16px; }
  .world-map-view .world-content .eyebrow { margin-bottom: 10px; }
  .world-map-view .world-overview { font-size: 13px; line-height: 1.6; }
  .world-map-view .races-open { margin-top: 20px; }
}
/* Give the Alrians' paragraph room to carry its trailing words upward. */
.alrian-description{max-width:40ch}
@media(max-width:820px){.origin-copy:has(.alrian-description){width:40ch}}