@import url('https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.2.5/index.css');
:root{color-scheme:dark;background:#101010;color:#f4f3f6;font-family:'Geist Sans',Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid #b7a8ff;outline-offset:5px}
.site-header{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:28px;height:76px;padding:0 clamp(20px,3.5vw,56px);background:#101010;border-bottom:1px solid #ffffff1c}
.brand img{display:block;width:170px;max-width:28vw;height:auto;mix-blend-mode:screen}
.site-header nav{display:flex;align-items:center;gap:clamp(16px,2.5vw,38px);font-size:13px;color:#d4d5dc}
.site-header nav a:hover,.site-header nav a[aria-current]{color:#fff}
.site-header nav a[aria-current]{text-decoration:underline;text-underline-offset:8px;text-decoration-color:#aaa2d7}
.header-cta{display:inline-flex;align-items:center;gap:18px;white-space:nowrap;border:1px solid #ffffff5e;border-radius:10px;padding:12px 17px;font-size:12px;background:#ffffff0e;backdrop-filter:blur(12px)}
.header-cta:hover{background:#ffffff20}
.banner{position:relative;isolation:isolate;height:clamp(360px,37vw,510px);overflow:hidden;background:#020713}
.banner-scene{position:absolute;top:50%;left:50%;width:100%;min-width:1000px;aspect-ratio:1410/793;transform:translate(-50%,-52%);pointer-events:none}
.layer{position:absolute;display:block;max-width:none}
.stars{inset:0;width:100%;height:100%}
.earth{left:15.1%;top:21.4%;width:69.8%;height:124%;object-fit:contain}
.workshop{left:0;top:3.3%;width:100%;height:100%}
.creative{left:0;top:-22.3%;width:100%;height:100%}
.banner-shade{position:absolute;inset:0;background:linear-gradient(90deg,#080b19eb 0%,#0b1022b8 38%,#080b193d 78%),linear-gradient(0deg,#101010a6,transparent 40%);pointer-events:none}
.banner-copy{position:absolute;z-index:1;left:max(5.5vw,24px);bottom:clamp(45px,7vw,90px);width:min(740px,84vw)}
.eyebrow,.section-no{margin:0 0 22px;color:#b6a9e7;font-size:10px;font-weight:700;letter-spacing:.23em}
.banner h1{margin:0;font-family:'General Sans','Geist Sans',sans-serif;font-size:clamp(38px,5.1vw,72px);font-weight:500;line-height:1.08;letter-spacing:-.055em}
.banner-copy>p:last-child{margin:24px 0 0;color:#d0d5e2;font-size:15px;line-height:1.7}
.banner-index{position:absolute;right:5.5vw;bottom:26px;color:#d7d8e288;font-size:9px;letter-spacing:.22em}
.about-body{overflow:hidden;background:linear-gradient(#14151a,#101010 22%)}
.content-width{width:min(1200px,calc(100% - 72px));margin-inline:auto}
.intro{display:grid;grid-template-columns:1fr 2fr;gap:40px;padding:105px 0 115px;border-bottom:1px solid #ffffff25}
.intro .section-no{padding-top:12px}
h2{margin:0;font-family:'General Sans','Geist Sans',sans-serif;font-size:clamp(32px,4vw,56px);font-weight:500;line-height:1.16;letter-spacing:-.05em}
.intro p:last-child,.story-copy>p:not(.section-no){max-width:570px;margin:30px 0 0;color:#b9bbc6;font-size:16px;line-height:1.9;word-break:keep-all}
.story{display:grid;grid-template-columns:1.07fr .93fr;gap:clamp(40px,7vw,110px);align-items:center;padding:105px 0;border-bottom:1px solid #ffffff25}
.story-reverse .story-art{order:2}
.story-art{position:relative;min-height:390px;overflow:hidden;border:1px solid #ffffff1d;border-radius:20px;background:radial-gradient(circle at 48% 42%,#263a6e,#080d1c 67%);box-shadow:0 24px 58px #0005}
.story-art-earth img{position:absolute;width:84%;max-width:none;left:8%;top:-13%}
.story-art-world{background:radial-gradient(circle at 50% 55%,#31314a,#0d0e17 70%)}
.story-art-world img{position:absolute;width:155%;max-width:none;left:-27%;bottom:-30%;filter:brightness(1.8)}
.story-copy .section-no{margin-bottom:25px}
.story-copy a,.ending a{display:inline-flex;align-items:center;gap:36px;margin-top:38px;padding:12px 0;border-bottom:1px solid #c9c7d0;font-size:13px}
.story-copy a:hover,.ending a:hover{color:#cbbdff;border-color:#cbbdff}
.ending{padding:128px 0 140px;text-align:center}
.ending .section-no{margin-bottom:30px}
.ending a{margin-top:28px}
footer{display:flex;justify-content:space-between;gap:20px;padding:25px clamp(24px,5vw,70px);border-top:1px solid #ffffff22;color:#a6a8b4;font-size:11px}
footer a:hover{color:#fff}
@media(max-width:760px){.site-header{height:66px;gap:16px}.brand img{width:125px}.site-header nav{margin-left:auto}.site-header nav a:not([aria-current]){display:none}.header-cta{padding:9px 11px;gap:6px;font-size:11px}.banner{height:390px}.banner-scene{width:1000px;min-width:1000px;transform:translate(-49%,-49%)}.banner-copy{left:25px;bottom:60px;width:calc(100% - 50px)}.banner h1{font-size:clamp(37px,8vw,58px)}.banner-copy>p:last-child{font-size:13px;max-width:300px;margin-top:17px}.banner-index{right:24px;font-size:7px}.content-width{width:calc(100% - 40px)}.intro{grid-template-columns:1fr;gap:0;padding:76px 0 82px}.intro .section-no{padding:0}.intro p:last-child,.story-copy>p:not(.section-no){font-size:14px;margin-top:24px}.story{grid-template-columns:1fr;gap:36px;padding:75px 0}.story-reverse .story-art{order:0}.story-art{min-height:320px}.story-copy a{margin-top:24px}.ending{padding:95px 0 100px}}
@media(max-width:420px){.site-header{padding:0 16px}.brand img{width:106px}.site-header nav{font-size:11px}.header-cta{font-size:0}.header-cta span{font-size:16px}.banner{height:350px}.banner h1{font-size:36px}.intro h2{font-size:29px;word-break:keep-all}.story-art{min-height:265px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
