@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Noto+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--muted:#a2a3a5;--white:#f4f4f4;--accent:#00ff50}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#050505;color:var(--white);font-family:'Noto Sans',Arial,sans-serif}button,a,select{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button,select{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:6px}#universe{position:fixed;inset:0;z-index:-2;background:#030303}#universe canvas{display:block;width:100%;height:100%}.vignette{position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,rgba(3,3,3,.64),transparent 65%),linear-gradient(0deg,#050505 0%,transparent 24%)}header{position:absolute;top:0;width:100%;padding:33px 4.7%;display:flex;justify-content:space-between;align-items:center;z-index:2}.brand{display:flex;align-items:center;gap:12px;font-family:'Barlow',Arial,sans-serif;font-size:15px;font-weight:800;letter-spacing:2px}.brand-icon{display:block;width:56px;height:56px;flex-shrink:0;border-radius:50%;background:#080808;box-shadow:0 0 20px #ffffff18}.brand-sub{display:block;font-size:8px;letter-spacing:5.8px;margin-top:4px}nav{display:flex;align-items:center;gap:38px;font-size:12px}nav a span{margin-left:17px;color:var(--accent)}.nav-link{border:1px solid #ffffff30;border-radius:5px;padding:13px 18px;font-size:10px;letter-spacing:1.2px}.hero{min-height:800px;height:100svh;position:relative;padding:0 7%}.hero-copy{position:absolute;top:29%;max-width:530px}.eyebrow{font-size:9px;letter-spacing:2.5px;color:#ededed;display:flex;align-items:center;gap:11px}.dot{display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px #00ff5055}h1{font-family:'Barlow',Arial,sans-serif;font-size:clamp(60px,6.2vw,96px);font-weight:400;line-height:1.07;letter-spacing:-5px;margin:30px 0 24px}em{font-family:inherit;font-weight:400;color:#ededed}p{color:#b8b9bc;font-size:14px;line-height:1.85}.primary{display:inline-flex;align-items:center;gap:34px;background:#ededed;color:#ffffff;padding:17px 21px;border-radius:4px;font-size:12px;font-weight:600;margin-top:19px;transition:background .2s,transform .2s}.primary:hover{background:#ffffff;transform:translateY(-2px)}.primary span{font-size:18px}.home-label{font-size:8px;letter-spacing:1.7px;color:#a2a3a5;margin-top:17px}.planet-label{position:absolute;right:9%;top:31%;display:flex;gap:12px;font-size:10px;letter-spacing:2px}.cross{font-size:22px;color:#00ff50;line-height:.6}.planet-label span:not(.cross){color:#a2a3a5}.planet-label small{display:block;font-size:7px;letter-spacing:1.6px;color:#a2a3a5;margin-top:9px}.scene-tools{position:absolute;left:66%;bottom:21%;display:flex;align-items:center;gap:12px;font-size:9px;color:#b8b9bc;white-space:nowrap}.scene-tools button{background:none;color:#ffffff;border:0;font-size:12px}.scene-tools button span{font-size:10px;margin-left:7px}.divider{height:12px;width:1px;background:#ffffff26}.scene-tools label{font-size:7px;letter-spacing:1px}.scene-tools select{background:#171717ee;color:#ffffff;border:1px solid #ffffff18;border-radius:4px;padding:7px;font-size:9px}.coordinates{position:absolute;right:7%;bottom:11%;display:flex;gap:48px;font-size:18px;font-weight:400;color:#ededed}.coordinates small{display:block;font-size:7px;letter-spacing:1.5px;color:#a2a3a5;margin-top:8px}.scroll{position:absolute;bottom:11%;left:7%;font-size:8px;letter-spacing:2px;color:#ededed}.scroll span{margin-left:20px;font-size:18px}.time{position:absolute;bottom:4%;right:7%;display:flex;align-items:center;gap:10px;font:8px 'Noto Sans',Arial,sans-serif;letter-spacing:1px;color:#a2a3a5}.time #utc{color:#ededed}.perspective{padding:130px 12% 130px 7%;background:#0c0c0cf0;border-top:1px solid #ffffff14;display:grid;grid-template-columns:1fr 1.35fr;gap:50px}.perspective .eyebrow{align-self:start;margin-top:15px}h2{font-size:54px;letter-spacing:-2px;font-weight:400;line-height:1.12;margin:0 0 25px}.perspective p{max-width:470px}.perspective a{display:inline-block;font-size:12px;border-bottom:1px solid #00ff50;padding:15px 0}.perspective a span{margin-left:35px}footer{padding:30px 7% 120px;background:#0c0c0c;display:flex;justify-content:space-between;font-size:7px;letter-spacing:1.5px;color:#a2a3a5}#scene-status{position:fixed;bottom:6px;right:10px;font-size:9px;color:#b8b9bc}.fallback-earth{position:absolute;top:20%;left:50%;width:45vw;aspect-ratio:1;border-radius:50%;background:url('assets/earth-day.jpg') center/auto 100%;box-shadow:inset -65px -25px 70px #000,0 0 35px #3980bd44}@media(min-width:1600px){.hero-copy{top:31%}}@media(max-width:800px){header{padding:24px 6%}nav{gap:0}nav>a:first-child{display:none}.brand{font-size:12px}.brand-icon{width:44px;height:44px}.brand-sub{font-size:6px;letter-spacing:4.8px}.nav-link{font-size:8px;padding:11px}.hero{height:1000px;min-height:100svh;padding:0 7%}.hero-copy{top:150px}h1{font-size:64px;letter-spacing:-3px}.hero-copy p{font-size:12px}.eyebrow{font-size:7px;letter-spacing:2px}.planet-label{top:56%;right:8%;font-size:8px}.planet-label small{font-size:6px}.scene-tools{left:auto;right:8%;bottom:17%}.coordinates{bottom:9%;gap:28px;font-size:15px}.scroll{bottom:10%;font-size:6px;letter-spacing:1px}.scroll span{margin-left:8px}.time{bottom:4%}.perspective{padding:65px 7% 80px;grid-template-columns:1fr;gap:32px}h2{font-size:42px}.perspective p{font-size:13px}footer{padding:25px 7% 120px;gap:20px;flex-wrap:wrap;line-height:1.8}footer>span:nth-child(2){display:none}.fallback-earth{top:53%;left:10%;width:80vw}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media(max-width:800px){.scene-tools{bottom:14%}}

/* Keep the axial-tilt reading clear of the globe and aligned with its caption. */
.coordinates > span:first-child{text-align:right}
@media(min-width:801px){.coordinates{gap:24px}}

/* Lower the Earth measurements while keeping them above the clock. */
.coordinates{bottom:8%}
@media(max-width:800px){.coordinates{bottom:7%}}

/* McLaren-inspired display typography, with Noto Sans for body text. */
body{font-weight:400}
h1,h2{font-family:'Barlow',Arial,sans-serif;font-weight:300;letter-spacing:-.035em}
em{font-style:normal;font-weight:inherit}
.brand{font-weight:600;letter-spacing:1.8px}
.primary,.nav-link{font-weight:600}
@media(max-width:800px){h1{font-size:clamp(46px,14.8vw,64px)}h2{font-size:clamp(34px,10.5vw,42px)}}

/* Bevineau green accents on a black and white palette. */
.brand>span,h1,h2{color:var(--white)}
.brand-sub{color:var(--muted)}
h1 em,h2 em{color:var(--white)}
nav a,.perspective a{color:#ededed}
nav a:hover,.perspective a:hover,footer a:hover{color:#00ff50}
.nav-link,.scene-tools select{border-color:#ffffff35}
.primary{background:#00ff50;color:#031408;box-shadow:0 0 24px #00ff501a}
.primary:hover{background:#60ff92}
.dot{background:var(--accent)}
::selection{background:#00ff50;color:#031408}
@media(forced-colors:active){.primary{background:ButtonFace;color:ButtonText}}