/* D-DIN by Datto, SIL OFL 1.1 (see D-DIN-OFL.txt). Type values follow spacex.com. */
@font-face{font-family:D-DIN;src:url('/assets/D-DIN.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:D-DIN;src:url('/assets/D-DIN-Bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}

:root{
  color-scheme:dark;
  --black:#000;
  --white:#F0F0F0;
  --white-90:rgb(240 240 240 / 90%);
  --white-50:rgb(240 240 240 / 50%);
  --white-35:rgb(240 240 240 / 35%);
  --line:rgb(255 255 255 / 14%);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--white);font:400 16px/24px D-DIN,Arial,Verdana,sans-serif}
a{color:inherit;text-underline-offset:4px}
a:focus-visible{outline:2px solid var(--white);outline-offset:4px}
h1,h2,h3,p{margin:0;overflow-wrap:anywhere}

.column{width:calc(100% - 40px);max-width:1240px;margin-inline:auto}
.narrow{max-width:720px}
/* Small capitals: the spacex.com navigation style */
.caps{font-size:.813rem;font-weight:700;line-height:94%;letter-spacing:.09em;text-transform:uppercase}

.skip-link{position:absolute;left:20px;top:-80px;background:var(--black);padding:12px;z-index:5}
.skip-link:focus{top:12px}

/* Header */
.site-header{display:flex;justify-content:space-between;align-items:center;min-height:96px;gap:20px;position:relative;z-index:2}
.site-header.overlay{position:absolute;inset:0 0 auto}
.wordmark{font-size:22px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;text-decoration:none;margin-right:-.32em}
.site-nav{display:flex;column-gap:24px}
.site-nav a{color:var(--white-90);font-size:.813rem;font-weight:700;line-height:94%;letter-spacing:.09em;text-transform:uppercase;text-decoration:none}
.site-nav a:hover{color:var(--white)}

/* Titles and text: spacex.com h2 and p */
.panel h1,.panel h2,.page h1{font-size:3rem;font-weight:700;line-height:60px;letter-spacing:.02em;text-transform:uppercase;color:var(--white)}
.panel p{margin:20px 0 15px;color:var(--white)}
.link{font-weight:700;color:var(--white);text-decoration:underline}
.link:hover{color:#CCC}

/* Button: spacex.com spx-button, primary theme */
.button{display:inline-flex;align-items:center;height:48px;margin-top:30px;padding:0 20px;border:1px solid var(--white-35);border-radius:4px;background-color:rgb(0 0 0 / 50%);color:var(--white);text-decoration:none;transition:background-color .5s cubic-bezier(.19,1,.22,1)}
.button .text{font-size:.75rem;line-height:100%;text-transform:uppercase;transition:color .5s cubic-bezier(.19,1,.22,1)}
.button .icon{position:relative;left:0;display:flex;width:16px;height:16px;margin-left:10px;transition:color .4s}
.button:hover{background-color:var(--white);transition:background-color .4s}
.button:hover .text,.button:hover .icon{color:#000}
.button:hover .icon{animation:slide-out .2s forwards,slide-in .4s forwards;animation-delay:0s,.2s}
@keyframes slide-in{0%{left:-10px;opacity:1}to{left:0;opacity:1}}
@keyframes slide-out{0%{left:0;opacity:1}to{left:10px;opacity:0}}

/* Full-screen panels, text at the bottom left */
.panel{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.panel::before,.panel::after{content:'';position:absolute;pointer-events:none;z-index:-1}
.panel::after{inset:0;background:linear-gradient(to top,var(--black) 0%,rgb(0 0 0 / 70%) 30%,transparent 65%)}
.panel .content{padding-bottom:15vh}
.panel .content > *{max-width:520px}
.panel .caps{display:block;margin-bottom:16px;color:var(--white-50)}

/* Reveal: spacex.com reveal-header, reveal-subheader, reveal-button */
.hero h1{animation:reveal .75s ease-in-out backwards}
.hero p{animation:reveal .75s ease-in-out .5s backwards}
.hero .button{animation:reveal .75s ease-in-out 1s backwards}
@keyframes reveal{from{opacity:0;transform:translateY(12px)}}

/* Hero: stars */
.hero{background-image:
  radial-gradient(1px 1px at 8% 14%,#fff,transparent),radial-gradient(1px 1px at 22% 38%,rgb(255 255 255 / 70%),transparent),
  radial-gradient(1.5px 1.5px at 35% 9%,#fff,transparent),radial-gradient(1px 1px at 47% 27%,rgb(255 255 255 / 60%),transparent),
  radial-gradient(1px 1px at 58% 12%,#fff,transparent),radial-gradient(1px 1px at 66% 44%,rgb(255 255 255 / 50%),transparent),
  radial-gradient(1.5px 1.5px at 74% 21%,#fff,transparent),radial-gradient(1px 1px at 83% 8%,rgb(255 255 255 / 70%),transparent),
  radial-gradient(1px 1px at 91% 33%,#fff,transparent),radial-gradient(1px 1px at 14% 52%,rgb(255 255 255 / 40%),transparent),
  radial-gradient(1px 1px at 52% 55%,rgb(255 255 255 / 40%),transparent),radial-gradient(1px 1px at 96% 58%,rgb(255 255 255 / 50%),transparent)}

/* 01 agents: perspective grid */
.v-grid::before{left:-50%;right:-50%;top:35%;bottom:-20%;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;transform:perspective(700px) rotateX(62deg);transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%);mask-image:linear-gradient(to bottom,transparent,#000 40%)}

/* 02 research: scan field */
.v-scan::before{inset:8% 0 30% 35%;
  background:linear-gradient(90deg,transparent,rgb(255 255 255 / 55%) 50%,transparent) 0 50%/100% 1px no-repeat,
    repeating-linear-gradient(90deg,rgb(255 255 255 / 13%) 0 1px,transparent 1px 11px);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 20%,transparent 70%)}

/* 03 products: rings */
.v-rings::before{inset:0;
  background:repeating-radial-gradient(circle at 72% 42%,rgb(255 255 255 / 22%) 0 1px,transparent 1.5px 46px);
  -webkit-mask-image:radial-gradient(circle at 72% 42%,#000 0,transparent 55%);mask-image:radial-gradient(circle at 72% 42%,#000 0,transparent 55%)}

/* Contact */
.contact{min-height:70svh;border-top:1px solid var(--line)}
.contact::after{display:none}

/* Footer */
.site-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding:32px 0 40px;border-top:1px solid var(--line);color:var(--white-50)}
.site-footer nav{display:flex;column-gap:24px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--white)}

/* Text pages: spacex.com update text, 17px with 1.75 line height */
.page{padding:48px 0 96px;min-height:calc(100svh - 200px)}
.page h1{margin-bottom:32px}
.prose{font-size:1.0625rem;line-height:1.75}
.prose h2{margin:40px 0 8px;font-size:1.25rem;font-weight:400;letter-spacing:.02em;text-transform:uppercase}
.prose p,.prose address,.prose ul{margin:0 0 1rem;font-style:normal;color:var(--white)}
.prose ul{padding-left:22px}
.prose .meta{margin-top:48px;color:var(--white-50)}

@media (prefers-reduced-motion:reduce){.hero h1,.hero p,.hero .button{animation:none}.button:hover .icon{animation:none}.button,.button .text{transition:none}}
/* spacex.com mobile breakpoint */
@media (max-width:961px){
  .panel h1,.panel h2,.page h1{font-size:2.25rem;line-height:2.25rem}
  .panel p{line-height:1.6}
  .panel .content{padding-bottom:12vh}
}
@media (max-width:600px){.wordmark{font-size:18px}.v-scan::before{left:0}}