:root{--ink:#141315;--paper:#e4ddcc;--muted:#b0a79b;--tan:#c4aa83;--line:#e3d5c82b;--rose:#ad8b88}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif;min-height:100svh}button,a,input{-webkit-tap-highlight-color:transparent}button,a{color:inherit}button{font:inherit;cursor:pointer}button{border:0;background:none}a{text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--tan);outline-offset:5px}button:disabled{opacity:.4;cursor:default}.world{position:fixed;inset:0;background:linear-gradient(90deg,#11111422,transparent),url('assets/moon-world.png') center/cover no-repeat;z-index:-3;transition:filter 1s,transform 1.5s}.grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.13;background-image:url('data:image/svg+xml,%3Csvg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".85" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Cpath fill="%23ffffff" filter="url(%23n)" opacity=".5" d="M0 0h180v180H0z"/%3E%3C/svg%3E')}#stars{position:fixed;inset:0;pointer-events:none;z-index:-1}header{display:flex;align-items:center;justify-content:space-between;margin:0 4%;padding:26px 0;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;gap:12px;align-items:center;font-size:13px;line-height:1.08;font-weight:900;letter-spacing:.025em}.brand-icon{background:var(--tan);color:var(--ink);border:1px solid #ecdec5;transform:rotate(-9deg);width:36px;height:41px;display:grid;place-items:center;font:900 34px Georgia}.ticker{display:block;font:10px monospace;letter-spacing:.12em;margin-top:5px;color:var(--tan)}nav{display:flex;gap:22px}nav button{font:12px monospace;opacity:.55;padding:12px 0;position:relative}nav button.active{opacity:1}nav button.active:after{content:'';position:absolute;height:2px;background:var(--tan);bottom:0;left:0;right:0}.social{display:flex;gap:20px;align-items:center;font:12px monospace}.buy{border:1px solid var(--tan);padding:14px 18px}.buy:hover,.primary:hover{background:#e5d5b8;transform:translateY(-2px);color:var(--ink)}main{position:relative}.view{padding:45px 5% 35px;min-height:calc(100svh - 165px);animation:appear .7s both}.view[hidden]{display:none}.eyebrow{font:11px/1.6 monospace;letter-spacing:.11em;color:var(--tan)}.tiny-star{font-size:23px;vertical-align:middle;margin-right:8px}h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(64px,6.8vw,112px);font-weight:900;line-height:.99;letter-spacing:-.015em;margin:25px 0 0;max-width:760px}h1 span{color:var(--tan)}.handwritten{font:italic 27px Georgia,serif;color:#d1bda7;transform:rotate(-5deg);margin:15px 0 24px 105px;width:max-content}.intro{font-size:15px;line-height:1.8;color:#bfb8ad}.primary{display:inline-flex;gap:40px;align-items:center;background:var(--tan);color:#1b1918;padding:18px 23px;font:bold 12px monospace;letter-spacing:.05em;transition:.25s;margin-top:20px}.primary span{font-size:20px}.text-button{display:block;font:12px monospace;border-bottom:1px solid #b5a79166;padding:0 0 8px;margin-top:22px}.hero-copy{position:relative;z-index:2}.moon-caption{position:absolute;right:5%;top:64%;text-align:right;pointer-events:none;text-shadow:0 2px 20px #000}.moon-caption span{font:10px monospace;letter-spacing:.15em}.moon-caption strong{display:block;font:clamp(30px,3.6vw,55px)/.96 Impact,'Arial Narrow',sans-serif;margin:15px 0 10px}.moon-caption em{font:italic 15px Georgia}.float-note{position:absolute;right:13%;top:36%;font:italic 18px Georgia;transform:rotate(-8deg);padding:14px;background:#14131588}.float-note span{display:block;font:9px monospace;margin:8px 0 0 22px;letter-spacing:.12em}.float-note:hover{background:var(--tan);color:var(--ink)}.bottom-line{display:flex;justify-content:space-between;margin-top:52px;font:10px monospace;letter-spacing:.11em;color:#c4b8a9}.section-top{display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:30px}h2{font:clamp(42px,4.2vw,66px)/1.03 Impact,'Arial Narrow',sans-serif;margin:15px 0;letter-spacing:.005em}h2 i{font-family:Georgia;font-weight:400;font-size:.8em;color:var(--tan)}.section-top>p{font:13px/1.8 monospace;color:var(--muted);text-align:right}body:not([data-view="arrival"]) .world{filter:brightness(.2) blur(3px);transform:scale(1.06)}.story-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:8%;max-width:1100px;margin:auto}.photo-frame{max-width:420px;transform:rotate(-3deg);background:#b8a98e;padding:10px 10px 18px;align-self:center;box-shadow:0 15px 70px #0007}.photo-frame img{width:100%;display:block;filter:sepia(.12)}.photo-frame>span{display:block;text-align:center;color:#272220;font:10px monospace;margin-top:13px}.chapter{align-self:center}.chapter-index{font:12px monospace;color:var(--tan)}h3{font:36px/1.1 Georgia,serif;font-weight:400;margin:20px 0}.chapter p{font:16px/1.8 Georgia,serif;color:#cdc5b7}.chapter-controls{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:20px;margin-top:24px}.chapter-controls>button{width:45px;height:40px;border:1px solid var(--line);font-size:23px}#chapterDots{display:flex;gap:12px}#chapterDots button{width:28px;height:28px;font:11px monospace;color:var(--muted)}#chapterDots button.active{background:var(--tan);color:var(--ink)}.orbit-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:6%;align-items:center}.orbit-system{height:420px;position:relative;max-width:660px;width:100%;margin:auto}.orbit-ring{position:absolute;border:1px solid #d7cbb644;border-radius:50%;inset:20% 3%;transform:rotate(-25deg);pointer-events:none}.r2{inset:8% 20%;transform:rotate(35deg)}.r3{inset:30% 0;transform:rotate(20deg);border-style:dashed}.orbit-center{position:absolute;top:40%;left:40%;width:20%;text-align:center;font:11px/1.5 monospace}.orbit-center>span{display:block;color:var(--tan);font-size:55px;animation:spin 30s linear infinite}.orbit-center b{font-weight:400}.orbit-node{position:absolute;transform:translate(-50%,-50%);text-align:left;transition:left .35s,top .35s;min-width:90px;padding:10px;background:#191719b8}.orbit-node>span{display:block;width:14px;height:14px;background:var(--tan);border-radius:50%;box-shadow:0 0 0 6px #c4aa831a;margin-bottom:10px}.orbit-node.active>span{box-shadow:0 0 0 10px #c4aa8325,0 0 30px #c4aa8370}.orbit-node small{display:block;font:9px monospace;color:var(--tan);margin-bottom:5px}.orbit-node b{font:12px monospace}.coordinate{position:absolute;font:9px monospace;color:#8d8580;letter-spacing:.12em}.c1{top:0;left:0}.c2{right:0;bottom:0}.orbit-detail{padding:25px;border-left:1px solid var(--line)}.orbit-detail h3{font-size:40px}.orbit-detail p{line-height:1.8;font-size:16px;color:#c2b9ab;max-width:430px}.orbit-detail small{font:11px/1.7 monospace;color:#9e9487}.orbit-adjust{margin:35px 0 25px}.orbit-adjust label,.tune-label{display:flex;justify-content:space-between;font:11px monospace;letter-spacing:.06em}input[type="range"]{width:100%;accent-color:var(--tan);cursor:pointer;margin:20px 0;height:24px}.radio-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:7%;align-items:center}.receiver{border:1px solid #aa9875;background:linear-gradient(135deg,#796a5444,#201d1b);padding:27px;box-shadow:8px 8px 0 #0004;transform:rotate(-1deg)}.receiver-top{display:flex;justify-content:space-between;font:14px monospace;padding-bottom:23px}.receiver-top>span{font-weight:900;letter-spacing:.2em}.receiver-top button{font-size:10px}.radio-display{padding:25px;background:#151b19;border:6px solid #2c2b27;box-shadow:inset 0 0 50px #000a;color:#c8c6aa}.radio-display>span{font:10px monospace;letter-spacing:.13em}.radio-display strong{font:clamp(48px,5vw,75px) monospace;letter-spacing:-.06em}.radio-display div>span{font:15px monospace;margin-left:12px}.radio-display p{font:13px/1.7 monospace;min-height:44px}.wave{height:27px;background:repeating-linear-gradient(90deg,transparent 0 5px,#c8c6aa77 5px 6px);clip-path:polygon(0 45%,5% 30%,10% 60%,15% 20%,20% 80%,25% 0,30% 70%,35% 10%,40% 90%,45% 20%,50% 80%,55% 10%,60% 90%,65% 15%,70% 85%,75% 0,80% 90%,85% 25%,90% 75%,95% 35%,100% 50%,100% 60%,0 60%)}.tune-label{margin-top:27px}.radio-bottom{display:flex;justify-content:space-between;align-items:center}.radio-bottom button{border-bottom:1px solid var(--tan);padding:10px 0;font:11px monospace}.radio-bottom>span{font:italic 13px/1.4 Georgia;color:var(--muted)}.belongings h3{font:40px/1.05 Georgia;margin:14px 0 22px}.artifact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.artifact-grid button{position:relative;border:1px solid var(--line);padding:17px;text-align:left;font:11px monospace;min-height:98px;transition:.2s;background:#15131588}.artifact-grid button:hover{transform:rotate(-2deg);border-color:var(--tan);background:#c4aa8315}.artifact-grid button>span{display:block;color:var(--tan);font-size:10px;margin-bottom:13px}.artifact-grid small{display:block;font:italic 13px Georgia;color:var(--muted);margin-top:8px}.artifact-grid button.found{border-color:#c4aa8377}.memory-progress{font:10px monospace;margin:24px 0}.memory-progress>div{height:2px;background:#d9cbb72b;margin-top:12px}.memory-progress i{display:block;width:0;height:100%;background:var(--tan);transition:width .5s}#ending{font:11px monospace;border-bottom:1px solid var(--tan);padding:12px 0}footer{display:flex;justify-content:space-between;gap:20px;padding:19px 4%;border-top:1px solid var(--line);font:10px monospace;letter-spacing:.05em;background:#11111477}footer button{font:10px monospace}footer>span{color:#b6ab9a;text-align:center}dialog{color:var(--paper);background:#242024;border:1px solid #bfa98a;padding:50px;max-width:620px;width:calc(100% - 36px);box-shadow:15px 15px 0 #0005}dialog::backdrop{background:#09090bd9;backdrop-filter:blur(8px)}dialog h2{font:44px/1.1 Georgia}dialog p{font:17px/1.8 Georgia;color:#d6cbbd}.close{position:absolute;right:18px;top:12px;font-size:30px}dialog[open]{animation:appear .3s}.drifting .world{animation:worldDrift 15s ease-in-out infinite alternate}.drifting .float-note{animation:float 4s ease-in-out infinite}.drifting .moon-caption{animation:float 6s ease-in-out infinite}.signal .radio-display{box-shadow:inset 0 0 40px #b0ac6720;border-color:#78735b}@keyframes appear{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{50%{translate:0 -15px;rotate:3deg}}@keyframes worldDrift{to{background-position:52% 48%;transform:scale(1.045)}}
@media(min-width:1600px){.view{padding-top:65px}h1{font-size:116px}.intro{font-size:17px}.hero-copy{margin-top:20px}.bottom-line{margin-top:65px}}
@media(max-width:1100px){header{flex-wrap:wrap}nav{order:3;width:100%;justify-content:center}.view{min-height:calc(100svh - 204px)}h1{font-size:7.6vw}.handwritten{font-size:23px;margin-left:40px}.moon-caption{top:66%}.float-note{right:7%;top:37%}.section-top>p{font-size:11px}.orbit-system{height:370px}.radio-layout{gap:30px}.receiver{padding:19px}}
@media(max-width:700px){header{padding:18px 0 10px;gap:15px}.social{gap:12px}.buy{padding:12px 10px;font-size:10px}nav{gap:0;justify-content:space-between}nav button{font-size:9px;padding:9px 0}.brand{font-size:11px}.brand-icon{width:28px;height:33px}.view{padding:28px 6%}.world{background-position:65% center}.hero-copy{padding-bottom:270px}h1{font-size:clamp(49px,11vw,77px);margin-top:24px;max-width:100%;text-shadow:0 3px 20px #000}.eyebrow{font-size:9px}.handwritten{font-size:21px;margin:18px 0 20px 16px}.intro{font-size:14px;max-width:310px;text-shadow:0 2px 8px #000}.primary{font-size:11px;padding:17px 20px;gap:25px;margin-top:13px}.text-button{font-size:11px}.moon-caption{top:auto;bottom:85px;right:7%}.moon-caption strong{font-size:34px}.moon-caption span{font-size:8px}.float-note{top:auto;bottom:200px;left:5%;right:auto;font-size:16px}.bottom-line{margin-top:0;gap:30px;line-height:1.6;font-size:8px}.bottom-line>span:last-child{text-align:right}.section-top{display:block;margin-bottom:22px}.section-top>p{text-align:left;font-size:11px}h2{font-size:42px}.story-layout,.orbit-layout,.radio-layout{grid-template-columns:1fr;gap:32px}.photo-frame{width:74%;max-width:300px;margin:10px auto}.chapter h3{font-size:31px}.chapter p{font-size:16px}.orbit-system{height:330px;width:95%}.orbit-detail{border-left:0;border-top:1px solid var(--line);padding:15px 0}.orbit-node{min-width:65px;padding:8px}.orbit-node b{font-size:10px}.orbit-center{left:37%;width:26%;font-size:9px}.orbit-center>span{font-size:38px}.receiver{margin:10px 0;padding:17px}.radio-display{padding:18px}.belongings h3{font-size:34px}.artifact-grid button{font-size:10px;padding:14px}footer{font-size:8px;flex-wrap:wrap;justify-content:space-between}footer button{font-size:9px}footer>span{order:3;width:100%;font-size:8px}dialog{padding:40px 25px 30px}dialog h2{font-size:34px}dialog p{font-size:16px}.desktop{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}#stars{display:none}}
.orbit-layout,.radio-layout,.story-layout{min-width:0}.orbit-layout>*,.radio-layout>*,.story-layout>*{min-width:0}.orbit-node{max-width:135px}.orbit-node b{overflow-wrap:anywhere}@media(max-width:700px){.orbit-layout{grid-template-columns:minmax(0,1fr)}.orbit-node{max-width:108px}.world{background-position:76% center}.hero-copy{padding-bottom:300px}.hero-copy:after{content:'';position:absolute;left:-6.8%;right:-6.8%;bottom:0;height:270px;background:linear-gradient(#141315 0%,transparent 35%,#14131555),url('assets/moon-world.png') 84% 35%/auto 410px;z-index:-1}.moon-caption{bottom:78px}.float-note{bottom:215px}body[data-view="arrival"] .world{background-image:linear-gradient(#111114e8,#111114ed),url('assets/moon-world.png')}}
.moon-caption,.float-note{z-index:3}.intro{font-size:16px}.text-button{font-size:14px}.artifact-grid button{font-size:14px}.artifact-grid small{font-size:14px}.receiver-top button,.radio-bottom button,#ending{font-size:12px}nav button{font-size:14px}nav{gap:18px}.orbit-node b{font-size:12px}@media(max-width:1100px){nav button{font-size:12px}}@media(max-width:700px){nav{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}nav button{text-align:left;font-size:12px}.text-button{font-size:12px}.artifact-grid button{font-size:12px}.moon-caption strong{font-size:28px}.moon-caption{right:6%;bottom:70px}.float-note{bottom:244px;font-size:15px}.intro{font-size:16px}}
