:root {
    --page-gutter: clamp(1rem, 5vw, 5rem);
    --section-space: clamp(5rem, 10vw, 8rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 6.5rem; }
body { min-width: 0; }
main, section, footer, nav, div { min-width: 0; }
img, canvas { display: block; max-width: 100%; }
p, h1, h2, h3, h4, a, span { overflow-wrap: break-word; }

body > nav:first-of-type {
    gap: clamp(.75rem, 2vw, 2rem);
    padding: clamp(1rem, 2.2vw, 1.5rem) var(--page-gutter);
}

body > nav:first-of-type > a:first-child {
    flex: 0 1 auto;
    font-size: clamp(1.35rem, 3vw, 2.25rem);
    letter-spacing: clamp(.12em, 1vw, .2em);
}

#menu-toggle { flex: 0 0 auto; }
.mobile-menu { overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu:not([hidden]) { animation: menu-in .35s cubic-bezier(.22, 1, .36, 1) both; }
.mobile-menu nav { min-height: calc(100svh - 8rem); justify-content: center; padding-bottom: 2rem; }
.mobile-menu a { width: fit-content; max-width: 100%; font-size: clamp(1.75rem, 9vw, 3rem); line-height: 1.05; }
.mobile-menu a[aria-current="page"], .mobile-menu a[aria-current="location"] { color: #e27b58; }

@keyframes menu-in {
    from { opacity: 0; transform: translateY(-1rem); }
    to { opacity: 1; transform: translateY(0); }
}

#hero {
    height: auto;
    min-height: 100svh;
    padding: clamp(8rem, 17vh, 11rem) var(--page-gutter) clamp(5rem, 10vh, 7rem);
}

#hero > .z-10 { width: min(100%, 64rem); }
#hero h1 { font-size: clamp(2.7rem, 8.5vw, 5.25rem); line-height: 1.08; }
#hero p { max-width: min(100%, 48rem); font-size: clamp(1rem, 2.2vw, 1.25rem); }
#hero .flex.flex-col.sm\:flex-row { width: min(100%, 42rem); margin-inline: auto; }
#hero .flex.flex-col.sm\:flex-row a { min-width: 0; padding-inline: clamp(1.25rem, 5vw, 3rem); }

#history { padding: var(--section-space) var(--page-gutter); }
#history > div:first-child { margin-bottom: clamp(4rem, 8vw, 6rem); }
#history h2 { font-size: clamp(2.25rem, 6vw, 3rem); line-height: 1.12; }
#history .grid { gap: clamp(2.5rem, 5vw, 4rem); }
#history .text-\[120px\] { font-size: clamp(4.5rem, 11vw, 7.5rem); }

#mars {
    height: auto;
    min-height: min(56rem, 100svh);
    padding-block: var(--section-space);
}
#mars > .relative { width: min(100%, 56rem); max-width: none; padding-inline: var(--page-gutter); }
#mars h2 { font-size: clamp(2.6rem, 7vw, 3.75rem); line-height: 1.08; }
#mars p { max-width: 42rem; }
#mars .inline-flex { max-width: 100%; }

#os { height: auto; min-height: min(52rem, 90svh); }
#os > .relative.z-10 { width: min(100%, 80rem); padding: var(--section-space) var(--page-gutter); }
#os h2 { font-size: clamp(2.5rem, 6vw, 3.25rem); line-height: 1.1; }
#os canvas { width: 100% !important; height: 100% !important; }

#roadmap { padding-block: var(--section-space); }
#roadmap > div:first-child { gap: 2rem; margin-bottom: clamp(3rem, 7vw, 6rem); padding-inline: var(--page-gutter); }
#roadmap h2 { font-size: clamp(2.5rem, 6vw, 3.75rem); line-height: 1.08; }
#roadmap-track { gap: clamp(1rem, 3vw, 3rem); padding-inline: var(--page-gutter); scroll-padding-inline: var(--page-gutter); }
#roadmap-track > div { flex: 0 0 min(85vw, 31.25rem); min-width: 0; }
#roadmap-track > div > div:last-child { inset: auto clamp(1.25rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem); }
#roadmap-track h3 { font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 1.1; }

main > section:last-child { min-height: min(52rem, 100svh); padding: var(--section-space) var(--page-gutter); }
main > section:last-child > .relative { width: min(100%, 56rem); }
main > section:last-child h2 { font-size: clamp(2.7rem, 8vw, 4.5rem); line-height: 1.08; }
main > section:last-child a { max-width: 100%; padding-inline: clamp(1.5rem, 6vw, 4rem); }

body > footer { padding: var(--section-space) var(--page-gutter); }
body > footer > .grid { gap: clamp(2.5rem, 6vw, 4rem); }
body > footer .tracking-\[0\.2em\] { font-size: clamp(1.8rem, 6vw, 2.25rem); }
body > footer .mt-24 { gap: 1rem; margin-top: clamp(4rem, 8vw, 6rem); }

@media (max-width: 767px) {
    .blueprint-grid { background-size: 48px 48px; }
    #hero .absolute.bottom-12 { bottom: 1.25rem; }
    #hero .space-y-12 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }
    #hero .tracking-\[0\.5em\] { letter-spacing: .28em; }
    #hero .flex.flex-col.sm\:flex-row { gap: .875rem; padding-top: .5rem; }
    #hero .flex.flex-col.sm\:flex-row a { width: 100%; padding-block: 1rem; }
    #mars { align-items: flex-end; min-height: 46rem; }
    #mars > .absolute .bg-gradient-to-r { background: linear-gradient(to top, #000 8%, rgba(0,0,0,.72) 52%, rgba(0,0,0,.12)); }
    #mars > .absolute .right-0 { display: none; }
    #mars > .relative { padding-top: 18rem; }
    #mars .inline-flex { align-items: flex-start; gap: 1rem; padding-left: 1rem; }
    #mars .inline-flex .text-sm { font-size: .72rem; line-height: 1.5; }
    #os { min-height: 44rem; justify-content: flex-end; }
    #os::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, #050505 9%, rgba(5,5,5,.82) 42%, transparent 72%); pointer-events: none; }
    #os > .relative.z-10 { padding-top: 20rem; }
    #os .pt-8.flex { flex-wrap: wrap; gap: 1.5rem 2rem; }
    #os .pt-8.flex > * { margin-left: 0; }
    #roadmap > div:first-child { align-items: flex-start; flex-direction: column; }
    #roadmap-track > div { flex-basis: min(86vw, 25rem); aspect-ratio: 4 / 5.4; }
    main > section:last-child .space-y-12 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }
    body > footer .flex.items-center { align-items: flex-start; }
    body > footer .animate-ping { flex: 0 0 auto; margin-top: .15rem; }
}

@media (max-width: 1023px) {
    body > aside { display: none; }
}

@media (max-width: 374px) {
    :root { --page-gutter: 1rem; }
    body > nav:first-of-type > a:first-child { font-size: 1.2rem; }
    #hero h1 { font-size: clamp(2.35rem, 13vw, 2.75rem); }
    #hero .tracking-\[0\.5em\] { font-size: .65rem; letter-spacing: .2em; }
    #roadmap-track > div { flex-basis: calc(100vw - 2rem); }
}

@media (max-height: 700px) and (max-width: 767px) {
    #hero { padding-top: 7rem; padding-bottom: 3rem; }
    #hero .absolute.bottom-12 { display: none; }
    .mobile-menu nav { justify-content: flex-start; }
    .mobile-menu a { font-size: clamp(1.55rem, 7vh, 2.2rem); }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu:not([hidden]) { animation: none; }
    #threejs-container-ANIMATION_5 canvas { opacity: .8; }
}