.site-header nav { align-items: center; }

.era-switcher { position: relative; font-family: "DM Mono", monospace; }
.era-switcher summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 1px solid rgba(201,255,106,.72); border-radius: 999px; color: #fff;
  background: rgba(7,16,30,.92); cursor: pointer; list-style: none;
  font: 700 11px/1 "DM Mono", monospace; letter-spacing: .1em;
}
.era-switcher summary::-webkit-details-marker { display: none; }
.era-switcher summary::after { content: "+"; color: var(--acid); font-size: 15px; }
.era-switcher[open] summary::after { content: "−"; }
.era-switcher summary span { color: #b7c5d7; font-size: 9px; }
.era-switcher summary b { color: var(--acid); }
.era-current-2250 { display: none; }
.era-2250-page .era-current-2186 { display: none; }
.era-2250-page .era-current-2250 { display: inline; }
.era-options {
  position: absolute; z-index: 30; top: calc(100% + 10px); right: 0; width: min(560px, 88vw);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  padding: 1px; background: rgba(169,223,255,.35); box-shadow: 0 24px 80px rgba(0,0,0,.42);
}
.era-option {
  min-height: 122px; display: grid; align-content: space-between; gap: 10px; padding: 15px;
  color: #edf0e9; background: #07101e; text-decoration: none;
}
.era-option strong { color: #fff; font: 500 27px/1 "Space Grotesk", sans-serif; letter-spacing: -.05em; }
.era-option span { color: #a9dfff; font: 700 9px/1.35 "DM Mono", monospace; letter-spacing: .08em; }
.era-option small { color: #aab6c7; font: 700 8px/1.4 "DM Mono", monospace; letter-spacing: .08em; }
.era-option[href]:hover, .era-option[href]:focus-visible { background: #19304a; outline: 1px solid #c9ff6a; outline-offset: -1px; }
.era-option.is-locked { opacity: .58; cursor: not-allowed; }
body:not(.era-2250-page) .era-option[data-era="2186"],
.era-2250-page .era-option[data-era="2250"] { background: #c9ff6a; color: #07101e; }
body:not(.era-2250-page) .era-option[data-era="2186"] span,
body:not(.era-2250-page) .era-option[data-era="2186"] small,
.era-2250-page .era-option[data-era="2250"] span,
.era-2250-page .era-option[data-era="2250"] small { color: #18304b; }

.footer-era-2250 { display: none; }
.era-2250-page .footer-era-2186 { display: none; }
.era-2250-page .footer-era-2250 { display: inline; }

.era-2250-page { min-width: 0; background: #160d0c; color: #f6eee5; --mars-rust: #d86c43; --mars-amber: #ffbf78; --mars-cream: #f6eee5; --mars-dark: #160d0c; --mars-panel: #261513; }
.era-2250-page .webgl-stage, .era-2250-page .scene-hud { display: none; }
.era-2250-page .grain { opacity: .045; }
.era-2250-page .site-header { position: absolute; }
.era-2250-page .brand span, .era-2250-page .era-switcher summary b, .era-2250-page footer a { color: var(--mars-amber); }
.era-2250-page .language-option { border-color: #ffc69a; background: #1b0f0e; }
.era-2250-page .language-option:hover, .era-2250-page .language-option:focus-visible { color: #1b0f0e; background: #ffc69a; border-color: #ffc69a; }

.mars-hero { min-height: 100svh; isolation: isolate; background: #341713; }
.mars-landscape { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(#100b12 0, #4b201a 46%, #bb5836 72%, #351714 100%); }
.mars-landscape::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 30%, rgba(255,194,129,.22), transparent 20%), linear-gradient(90deg, rgba(10,7,10,.72), rgba(10,7,10,.12) 70%); }
.mars-landscape::after { content: ""; position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 100% 15vh, 12.5vw 100%; mask-image: linear-gradient(#000, transparent 72%); }
.mars-sun { position: absolute; right: 15vw; top: 19vh; width: 78px; aspect-ratio: 1; border-radius: 50%; background: #ffe2b6; box-shadow: 0 0 75px rgba(255,200,132,.6); }
.mars-orbit { position: absolute; right: -12vw; top: -32vw; width: 72vw; aspect-ratio: 1; border: 1px solid rgba(255,214,173,.35); border-radius: 50%; transform: rotate(-17deg); }
.mars-ridge { position: absolute; right: -5%; left: -5%; bottom: 0; }
.mars-ridge-far { height: 44%; background: #71301f; clip-path: polygon(0 54%, 9% 42%, 18% 50%, 28% 31%, 38% 48%, 49% 28%, 60% 43%, 72% 26%, 81% 39%, 91% 19%, 100% 37%, 100% 100%, 0 100%); }
.mars-ridge-near { height: 28%; background: #251210; clip-path: polygon(0 58%, 12% 41%, 25% 54%, 38% 33%, 50% 49%, 66% 29%, 81% 45%, 100% 24%, 100% 100%, 0 100%); }
.mars-settlement-lights { position: absolute; right: 8%; bottom: 12%; width: 37%; height: 10%; opacity: .86; background: repeating-linear-gradient(90deg, transparent 0 28px, #ffd59c 29px 31px, transparent 32px 55px); filter: drop-shadow(0 0 9px #ffb465); transform: perspective(260px) rotateX(64deg) rotateZ(-4deg); }
.mars-hero-copy { position: relative; z-index: 2; width: min(980px, 82vw); padding: 21vh 6vw 160px; }
.mars-hero-copy h1 { max-width: 950px; font-size: clamp(58px, 8.4vw, 132px); line-height: .91; }
.mars-hero-copy h1 em { color: var(--mars-amber); }
.mars-hero-copy > p:not(.kicker) { max-width: 660px; margin: 30px 0; color: #f3ded1; font-size: 15px; line-height: 2; }
.mars-enter { display: inline-flex; align-items: center; gap: 28px; min-height: 52px; padding: 0 18px; border: 1px solid rgba(255,215,179,.6); color: #fff; text-decoration: none; font: 700 10px/1 "DM Mono", monospace; letter-spacing: .1em; }
.mars-enter b { color: var(--mars-amber); font-size: 18px; }
.mars-hero-data { position: absolute; z-index: 3; right: 6vw; bottom: 42px; left: 6vw; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,225,199,.35); }
.mars-hero-data span { padding: 14px 16px 0 0; color: #f2d9c9; font: 700 10px/1.4 "DM Mono", monospace; letter-spacing: .1em; }
.mars-hero-side { position: absolute; z-index: 3; top: 26%; right: 3vw; margin: 0; writing-mode: vertical-rl; color: #e6b69a; font: 700 9px/1 "DM Mono", monospace; letter-spacing: .16em; }

.mars-era-statement { display: grid; grid-template-columns: .55fr 1.1fr 1fr; gap: 5vw; padding: 120px 6vw; background: #f3e6d8; color: #281410; }
.mars-era-statement > p, .mars-history header > p, .mars-era-closing > p { margin: 8px 0 0; color: #9f3e28; font: 700 10px/1.4 "DM Mono", monospace; letter-spacing: .12em; }
.mars-era-statement h2, .mars-history h2, .mars-era-closing h2, .mars-era-section h2 { font-size: clamp(38px, 5vw, 76px); line-height: 1.02; }
.mars-era-statement h2 em, .mars-history h2 em, .mars-era-section h2 em { color: #bd4d30; }
.mars-era-statement > div p { margin: 0 0 1.2em; color: #5d4037; font-size: 14px; line-height: 2; }

.mars-era-section { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px 6vw; padding: 110px 6vw; background: var(--mars-dark); border-top: 1px solid rgba(255,213,175,.22); }
.mars-era-section:nth-of-type(even) { background: #211210; }
.mars-era-section header { align-self: end; }
.mars-section-number { margin: 0 0 20px; color: var(--mars-amber); font: 700 10px/1 "DM Mono", monospace; letter-spacing: .14em; }
.mars-section-lead { max-width: 650px; margin: 26px 0 0; color: #dcbfb0; font-size: 14px; line-height: 1.9; }
.mars-section-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; grid-column: 1 / -1; }
.mars-section-copy p { margin: 0; color: #d7c2b8; font-size: 14px; line-height: 2; }
.mars-section-visual { position: relative; min-height: 340px; overflow: hidden; border: 1px solid rgba(255,196,144,.28); background: #321b17; }
.mars-section-visual::before, .mars-section-visual::after, .mars-section-visual i { content: ""; position: absolute; display: block; }
.mars-section-visual > span { position: absolute; z-index: 4; top: 18px; left: 18px; color: var(--mars-amber); font: 700 9px/1 "DM Mono", monospace; letter-spacing: .12em; }
.mars-visual-districts { background-image: linear-gradient(rgba(255,191,120,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(255,191,120,.11) 1px, transparent 1px); background-size: 42px 42px; }
.mars-visual-districts::after { right: 8%; bottom: -28%; left: 8%; height: 70%; border: 18px solid #e6b28b; border-bottom: 0; border-radius: 50% 50% 0 0; }
.mars-visual-districts i { bottom: 22%; width: 10px; height: 10px; border-radius: 50%; background: #ffd38e; box-shadow: 0 0 16px #ff9f55; }
.mars-visual-districts i:nth-of-type(1) { left: 19%; }.mars-visual-districts i:nth-of-type(2) { left: 31%; }.mars-visual-districts i:nth-of-type(3) { left: 44%; }.mars-visual-districts i:nth-of-type(4) { left: 57%; }.mars-visual-districts i:nth-of-type(5) { left: 69%; }.mars-visual-districts i:nth-of-type(6) { left: 81%; }
.mars-visual-sol::before { width: 170px; aspect-ratio: 1; right: 12%; top: 18%; border-radius: 50%; background: radial-gradient(circle, #ffe0ad 0 23%, #c65d37 24% 25%, transparent 26%); box-shadow: 0 0 0 1px #e98a5e; }
.mars-visual-sol::after { right: 7%; bottom: 22%; left: 7%; border-top: 1px solid #e98a5e; }
.mars-visual-sol i { bottom: 21%; width: 8px; height: 8px; border-radius: 50%; background: #ffd38e; }
.mars-visual-sol i:nth-of-type(1) { left: 11%; }.mars-visual-sol i:nth-of-type(2) { left: 27%; }.mars-visual-sol i:nth-of-type(3) { left: 43%; }.mars-visual-sol i:nth-of-type(4) { left: 59%; }.mars-visual-sol i:nth-of-type(5) { left: 75%; }.mars-visual-sol i:nth-of-type(6) { left: 91%; }
.mars-visual-shell::before { inset: 22% 10% -18%; border: 26px solid #e7d9ca; border-bottom: 0; border-radius: 50% 50% 0 0; box-shadow: 0 -10px 0 #c65d37, inset 0 18px 0 #8b5845; }
.mars-visual-shell::after { right: 22%; bottom: 13%; left: 22%; height: 42%; border: 8px solid #ffbd78; border-bottom: 0; border-radius: 50% 50% 0 0; }
.mars-visual-shell i { bottom: 12%; width: 1px; height: 38%; background: #8b5845; }
.mars-visual-shell i:nth-of-type(1) { left: 26%; }.mars-visual-shell i:nth-of-type(2) { left: 36%; }.mars-visual-shell i:nth-of-type(3) { left: 46%; }.mars-visual-shell i:nth-of-type(4) { left: 56%; }.mars-visual-shell i:nth-of-type(5) { left: 66%; }.mars-visual-shell i:nth-of-type(6) { left: 76%; }
.mars-visual-systems { display: grid; grid-template-columns: repeat(2,1fr); background: #1e1211; }
.mars-visual-systems i { position: relative; inset: auto; border: 1px solid rgba(255,191,120,.3); }
.mars-visual-systems i::after { content: ""; position: absolute; inset: 24%; border: 8px solid #d76742; border-radius: 50%; }
.mars-visual-systems i:nth-of-type(2)::after, .mars-visual-systems i:nth-of-type(5)::after { border-color: #d7e9e4; }
.mars-visual-network::before { top: 50%; right: 10%; left: 10%; border-top: 1px dashed #ffbd78; }
.mars-visual-network i { top: calc(50% - 8px); width: 16px; height: 16px; border: 2px solid #ffd6af; border-radius: 50%; background: #321b17; }
.mars-visual-network i:nth-of-type(1) { left: 10%; box-shadow: 0 0 0 28px #28577a; }.mars-visual-network i:nth-of-type(2) { left: 37%; box-shadow: 0 0 0 12px #b9b9ad; }.mars-visual-network i:nth-of-type(3) { left: 64%; box-shadow: 0 0 0 8px #e5d4bd; }.mars-visual-network i:nth-of-type(4) { right: 10%; box-shadow: 0 0 0 24px #b64f31; }
.mars-visual-commons { background-image: linear-gradient(rgba(255,191,120,.09) 1px, transparent 1px); background-size: 100% 16.66%; }
.mars-visual-commons::before { inset: 18% 12%; border-left: 2px solid #ffbd78; border-right: 2px solid #ffbd78; }
.mars-visual-commons i { left: 18%; right: 18%; height: 1px; background: #cc8063; }
.mars-visual-commons i:nth-of-type(1) { top: 27%; }.mars-visual-commons i:nth-of-type(2) { top: 38%; }.mars-visual-commons i:nth-of-type(3) { top: 49%; }.mars-visual-commons i:nth-of-type(4) { top: 60%; }.mars-visual-commons i:nth-of-type(5) { top: 71%; }.mars-visual-commons i:nth-of-type(6) { top: 82%; }
.mars-facts { display: grid; grid-template-columns: repeat(4,1fr); grid-column: 1 / -1; gap: 1px; margin: 0; background: rgba(255,207,167,.2); }
.mars-facts div { min-height: 112px; padding: 20px; background: #2a1714; }
.mars-facts dt { color: #d7ac96; font: 700 9px/1.4 "DM Mono", monospace; letter-spacing: .1em; }
.mars-facts dd { margin: 14px 0 0; color: #fff3e7; font: 500 clamp(19px,2vw,29px)/1.05 "Space Grotesk", sans-serif; letter-spacing: -.04em; }

.mars-history { padding: 120px 6vw; background: #eddfd0; color: #281410; }
.mars-history header { display: grid; grid-template-columns: .55fr 1.7fr; gap: 5vw; align-items: end; }
.mars-history-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 70px; background: #ad8f7d; }
.mars-history-item { position: relative; min-height: 260px; display: grid; align-content: start; padding: 24px; background: #f8efe6; color: #281410; text-decoration: none; }
.mars-history-item > span { color: #b74a2e; font: 500 48px/1 "Space Grotesk", sans-serif; letter-spacing: -.07em; }
.mars-history-item b { margin-top: 34px; font: 700 10px/1 "DM Mono", monospace; letter-spacing: .12em; }
.mars-history-item p { color: #624b42; font-size: 13px; line-height: 1.7; }
.mars-history-item small { position: absolute; bottom: 20px; left: 24px; color: #9b7665; font: 700 8px/1 "DM Mono", monospace; letter-spacing: .1em; }
.mars-history-item.is-live:hover, .mars-history-item.is-live:focus-visible, .mars-history-item.is-current { background: #c85334; color: #fff; outline: 0; }
.mars-history-item.is-live:hover p, .mars-history-item.is-live:hover small, .mars-history-item.is-current p, .mars-history-item.is-current small, .mars-history-item.is-current > span { color: #fff0e5; }
.mars-history-item.is-locked { opacity: .58; }
.mars-era-closing { min-height: 600px; padding: 130px 6vw; background: #b64d31; color: #fff5eb; }
.mars-era-closing > p { color: #2f1410; }
.mars-era-closing h2 { max-width: 1050px; margin-top: 20px; }
.mars-era-closing h2 em { color: #26110e; }
.mars-era-closing a { display: inline-flex; gap: 24px; margin-top: 50px; padding: 16px 18px; border: 1px solid #331711; color: #24100d; text-decoration: none; font: 700 10px/1 "DM Mono", monospace; letter-spacing: .1em; }

@media (max-width: 980px) {
  .era-options { grid-template-columns: repeat(2,1fr); width: min(420px, 88vw); }
  .era-option { min-height: 100px; }
  .mars-era-statement { grid-template-columns: 1fr; }
  .mars-era-statement > p { margin: 0; }
  .mars-history-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 720px) {
  .site-header nav { gap: 9px; }
  .era-switcher summary { min-height: 40px; padding: 0 9px; }
  .era-switcher summary > span { display: none; }
  .era-options { position: fixed; top: 72px; right: 5vw; left: 5vw; width: auto; }
  .era-option { min-height: 92px; }
  .language-option { min-height: 40px; padding-right: 10px; }
  .language-option > span:last-child { display: none; }
  .mars-hero-copy { width: 100%; padding: 20vh 7vw 180px; }
  .mars-hero-copy h1 { font-size: clamp(49px, 15vw, 82px); }
  .mars-hero-data { grid-template-columns: 1fr 1fr; bottom: 24px; }
  .mars-hero-data span { padding-top: 9px; }
  .mars-hero-side { display: none; }
  .mars-sun { right: 9vw; top: 16vh; width: 54px; }
  .mars-era-statement, .mars-era-section, .mars-history, .mars-era-closing { padding: 76px 7vw; }
  .mars-era-section { grid-template-columns: 1fr; gap: 34px; }
  .mars-section-visual { min-height: 270px; }
  .mars-section-copy { grid-template-columns: 1fr; gap: 20px; }
  .mars-facts { grid-template-columns: 1fr 1fr; }
  .mars-facts div { min-height: 98px; padding: 16px; }
  .mars-history header { grid-template-columns: 1fr; }
  .mars-history-grid { grid-template-columns: 1fr; margin-top: 45px; }
  .mars-history-item { min-height: 210px; }
  .mars-era-closing { min-height: 500px; }
}

@media (prefers-reduced-motion: reduce) {
  .era-option, .mars-enter, .mars-history-item { transition: none; }
}