:root{--ground:#12100d;--ink:#efe6d6;--muted:#a59a8a;--line:#2e2820;--spice:#e0a257;
  --sans:"Jost","Avenir Next","Century Gothic",system-ui,sans-serif;--serif:var(--sans)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font:400 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--spice);color:#170a02}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}

/* nav */
header.top{width:100%;position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding-top:28px;padding-bottom:28px}
.brand{white-space:nowrap;display:flex;align-items:center;gap:12px;font-weight:500;font-size:14px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none}
.brand svg{width:26px;height:26px;fill:none;stroke:var(--spice);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
nav a{color:rgba(239,230,214,.72);text-decoration:none;font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin-left:30px;transition:color .2s}
nav a:hover{color:var(--spice)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#0c0a08 0%,#1d1712 34%,#4a392a 58%,#927050 76%,#cfa877 90%,#e4c595 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:30%;height:26%;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(232,204,160,.2) 70%,transparent)}
#sky{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.sun{position:absolute;left:66%;bottom:13%;width:min(40vw,430px);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);z-index:0;
  background:radial-gradient(circle at 50% 45%,#fff6df 0%,#f8e2b4 40%,#ecc98f 72%,#dcae6f 100%);}
.sun::before{content:"";position:absolute;inset:-70%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(246,214,160,.5) 0%,rgba(236,196,140,.24) 34%,rgba(230,190,130,.08) 52%,transparent 68%)}
.dunes{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:2;pointer-events:none}
.d{position:absolute;left:0;bottom:0;width:200%;height:100%;will-change:transform}
.d1{height:78%;animation:drift 120s linear infinite}.d1 path{fill:#a8825a}
.d2{height:70%;animation:drift 80s linear infinite}.d2 path{fill:#69503a}
.d3{height:62%;animation:drift 50s linear infinite}.d3 path{fill:var(--ground)}
@keyframes drift{to{transform:translateX(-50%)}}
.hero-copy{position:relative;z-index:4;width:100%;margin-top:clamp(40px,11vh,130px);padding-bottom:48vh}
h1{font:300 clamp(25px,5vw,76px)/1.2 var(--sans);letter-spacing:.17em;text-transform:uppercase;margin:0 0 30px}
h1 .l{display:block}
h1 em{font-style:normal;font-weight:400;color:var(--spice)}
.hero-copy p{max-width:27em;font-size:clamp(17px,1.5vw,20px);font-weight:300;letter-spacing:.02em;color:rgba(239,230,214,.86);margin:0}
.js h1 .l{opacity:0;transform:translateY(.35em);animation:rise 1.1s cubic-bezier(.2,.7,.1,1) forwards}
.js h1 .l:nth-child(2){animation-delay:.14s}
.js .hero-copy p{opacity:0;animation:rise 1.1s .35s cubic-bezier(.2,.7,.1,1) forwards}
.js .sun{animation:sunrise 2.4s cubic-bezier(.2,.7,.1,1) both}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes sunrise{from{transform:translate(-50%,38%);opacity:.5}to{transform:translate(-50%,0);opacity:1}}


/* desert scene */
.ridge{position:absolute;left:0;bottom:0;width:200%;height:78%;animation:drift 120s linear infinite;will-change:transform}
.rig{position:absolute;left:21.4%;top:21%;width:clamp(40px,5.2vw,78px);transform:translate(-50%,-92%)}
.rig.r2{left:71.4%}
.rig svg{display:block;width:100%;fill:#4a3826}
.rig .lit{fill:#ffe2ae}
.plume{position:absolute;left:22%;top:-10%;width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(244,222,184,.55),rgba(244,222,184,0) 70%);animation:plume 5s linear infinite}
.plume.p2{animation-delay:-1.7s}.plume.p3{animation-delay:-3.4s}
@keyframes plume{from{transform:translate(0,0) scale(.5);opacity:.9}to{transform:translate(-160%,-230%) scale(2.6);opacity:0}}

.citadel{position:absolute;right:auto;left:6%;bottom:44%;width:clamp(150px,24vw,380px);height:44%;opacity:.5}
.citadel path{fill:#8a6c4c}.citadel .shade{fill:#6f573d}.citadel .slit{fill:#f3dcae;opacity:.55}
#worm{position:absolute;left:0;bottom:0;width:100%;height:150%;pointer-events:none}
.fleet,.flight{position:absolute;inset:0;z-index:1;pointer-events:none}
.ship{position:absolute;fill:#2b221b;overflow:visible}
.ship .keel{fill:none;stroke:#f0d3a2;stroke-width:1.2;opacity:.45}
.ship .lit{fill:#ffe2ae;opacity:.8}
.ship.s1{width:clamp(110px,17vw,260px);right:6%;top:41%;animation:hover 48s ease-in-out infinite alternate}
.ship.s2{width:clamp(60px,8vw,120px);right:16%;top:24%;opacity:.7;animation:hover2 64s ease-in-out infinite alternate}
@keyframes hover{from{transform:translate(9vw,1vh)}to{transform:translate(-34vw,-3vh)}}
@keyframes hover2{from{transform:translate(-30vw,0)}to{transform:translate(12vw,-2vh)}}
.flight{z-index:2}
.thopter{position:absolute;left:100%;top:64%;width:clamp(44px,5.4vw,84px);animation:fly 52s 6s linear infinite}
.thopter.t2{top:69%;width:clamp(28px,3.4vw,52px);opacity:.85;animation-delay:8.2s}
.thopter svg{display:block;width:100%;fill:#17120d;overflow:visible;animation:bob 2.4s ease-in-out infinite alternate}
.thopter .leg{stroke:#17120d;stroke-width:2;fill:none}
.thopter .w{transform-box:view-box;transform-origin:46px 34px;opacity:.75}
.thopter .w1,.thopter .w2{animation:flapu .11s linear infinite alternate}
.thopter .w3,.thopter .w4{animation:flapd .11s linear infinite alternate}
.thopter .w2,.thopter .w4{animation-delay:-.055s}
@keyframes fly{0%{transform:translate(0,0)}42%,100%{transform:translate(-125vw,3vh)}}
@keyframes bob{to{transform:translateY(5px) rotate(-2deg)}}
@keyframes flapu{from{transform:rotate(10deg)}to{transform:rotate(-22deg)}}
@keyframes flapd{from{transform:rotate(-10deg)}to{transform:rotate(22deg)}}

/* sections */
main{position:relative;z-index:3;background:var(--ground)}
section.wrap{padding-top:clamp(72px,11vw,140px);padding-bottom:clamp(40px,6vw,72px)}
h2{font:500 12px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--spice);margin:0 0 36px;display:flex;align-items:center;gap:14px}
h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.row{display:grid;grid-template-columns:90px 1fr 1.2fr;gap:24px;align-items:baseline;padding:34px 0;border-top:1px solid var(--line);position:relative}
.row:last-child{border-bottom:1px solid var(--line)}
.row::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--spice);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.row::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(224,162,87,.09),rgba(224,162,87,0) 70%);opacity:0;transition:opacity .7s ease;pointer-events:none}
.row .n{font:400 14px var(--sans);letter-spacing:.2em;color:var(--muted);transition:color .6s ease}
.row h3{font:300 clamp(22px,3.1vw,40px)/1.1 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin:0;transition:color .6s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
.row p{margin:0;color:var(--muted);max-width:30em;transition:color .6s ease}
@media (hover:hover){
  .row:hover::before{transform:scaleX(1)}
  .row:hover::after{opacity:1}
  .row:hover .n,.row:hover h3{color:var(--spice)}
  .row:hover h3{transform:translateX(14px)}
  .row:hover p{color:var(--ink)}
}
.big{font:300 clamp(23px,3vw,40px)/1.32 var(--sans);letter-spacing:.01em;margin:0 0 48px;max-width:21em;text-wrap:balance}
.big em{font-style:normal;color:var(--spice)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:900px}
.cols p{margin:0;color:var(--muted)}
.contact{padding-bottom:clamp(72px,10vw,130px)}
.mail{display:inline-block;font:300 clamp(19px,3.7vw,54px)/1.1 var(--sans);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
  background:linear-gradient(90deg,var(--ink) 0 50%,var(--spice) 50% 100%);background-size:200% 100%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .7s cubic-bezier(.2,.7,.1,1);margin-bottom:24px}
.mail:hover{background-position:-100% 0}
.contact p{color:var(--muted);margin:0;max-width:30em}
footer.wrap{letter-spacing:.04em;position:relative;z-index:3;border-top:1px solid var(--line);padding-top:30px;padding-bottom:44px;color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between}
footer a{color:var(--muted);text-underline-offset:3px}
footer a:hover{color:var(--spice)}

/* reveal */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.1,1),transform .9s cubic-bezier(.2,.7,.1,1)}
.js .rv.in{opacity:1;transform:none}

/* plain pages */
.plain{background:radial-gradient(1200px 500px at 50% -200px,#3b2d20 0%,transparent 70%),var(--ground);background-repeat:no-repeat}
.prose{padding:64px 0 88px;max-width:44em}
.prose h1{font-size:clamp(26px,4vw,44px);margin:0 0 14px}
.prose h2{font:500 14px/1.3 var(--sans);letter-spacing:.2em;color:var(--ink);margin:40px 0 8px;display:block}
.prose h2::after{display:none}
.prose p,.prose li{color:var(--muted)}
.prose a{color:var(--spice)}
.prose .meta{font-size:15px;margin-bottom:36px}

@media (max-width:760px){
  .wrap{padding:0 20px}
  nav a{margin-left:16px;font-size:11px;letter-spacing:.16em}
  .brand{font-size:12px;letter-spacing:.18em}
  h1{letter-spacing:.12em}
  .citadel{bottom:50%}
  nav a:nth-child(2){display:none}

  .hero-copy{padding-bottom:44vh}
  .sun{left:50%;width:58vw;bottom:12%}
  .thopter{top:58%}.thopter.t2{top:62%}
  .dunes{height:38%}
  .row{grid-template-columns:44px 1fr;gap:6px 12px;padding:26px 0}
  .row p{grid-column:2}
  .cols{grid-template-columns:1fr;gap:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .d,.ridge,.ship,.plume,.thopter svg,.thopter .w,.js .sun,.js h1 .l,.js .hero-copy p{animation:none;opacity:1;transform:none}
  .thopter{animation:none;left:70%}
  .js .sun{transform:translateX(-50%)}
  .js .rv{opacity:1;transform:none;transition:none}
}