:root{--night:#0b0910;--ground:#0d0a08;--ink:#f4ebdd;--muted:#a3978a;--line:#2a221c;--spice:#ff8a3d;--ember:#e2541b;
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
*{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:17px/1.65 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:10px;font-weight:600;letter-spacing:-.01em;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(244,235,221,.72);text-decoration:none;font-size:15px;margin-left:26px;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,#07060c 0%,#120b16 30%,#3a1320 54%,#8f2f17 72%,#e8642a 86%,#ffb057 100%)}
#sky{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.sun{position:absolute;left:50%;bottom:17%;width:min(46vw,460px);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);z-index:0;
  background:radial-gradient(circle at 50% 45%,#fff3c9 0%,#ffcf7a 34%,#ff9140 62%,#f2601f 100%);}
.sun::before{content:"";position:absolute;inset:-70%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(255,150,70,.55) 0%,rgba(255,120,50,.28) 32%,rgba(255,110,40,.1) 50%,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:#7a2a14}
.d2{height:70%;animation:drift 80s linear infinite}.d2 path{fill:#3d150f}
.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:400 clamp(52px,9.4vw,136px)/.94 var(--serif);letter-spacing:-.025em;margin:0 0 28px;text-wrap:balance}
h1 .l{display:block}
h1 em{font-style:italic;color:var(--spice);text-shadow:0 0 40px rgba(255,138,61,.45)}
.hero-copy p{max-width:34em;font-size:clamp(17px,1.6vw,20px);color:rgba(244,235,221,.82);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}}

/* 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 14px/1 var(--sans);letter-spacing:.02em;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;transition:padding .35s}
.row:last-child{border-bottom:1px solid var(--line)}
.row::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--spice);transition:width .6s cubic-bezier(.2,.7,.1,1)}
.row:hover::before{width:100%}
.row:hover{padding-left:14px}
.row .n{font:400 22px var(--serif);color:var(--muted)}
.row h3{font:400 clamp(34px,5vw,64px)/1 var(--serif);letter-spacing:-.02em;margin:0;transition:color .3s}
.row:hover h3{color:var(--spice)}
.row p{margin:0;color:var(--muted);max-width:30em}
.big{font:400 clamp(28px,4.1vw,54px)/1.14 var(--serif);letter-spacing:-.015em;margin:0 0 48px;max-width:21em;text-wrap:balance}
.big em{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:400 clamp(34px,7.6vw,112px)/1 var(--serif);letter-spacing:-.025em;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{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,#3a1320 0%,transparent 70%),var(--ground);background-repeat:no-repeat}
.prose{padding:64px 0 88px;max-width:44em}
.prose h1{font-size:clamp(44px,7vw,76px);margin:0 0 10px}
.prose h2{font:400 26px/1.2 var(--serif);letter-spacing:0;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:14px;font-size:14px}
  nav a:nth-child(2){display:none}
  .mail{font-size:clamp(30px,9.2vw,60px)}
  .hero-copy{padding-bottom:44vh}
  .sun{width:58vw;bottom:12%}
  .dunes{height:38%}
  .row{grid-template-columns:44px 1fr;gap:6px 12px;padding:26px 0}
  .row p{grid-column:2}
  .row:hover{padding-left:0}
  .cols{grid-template-columns:1fr;gap:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .d,.js .sun,.js h1 .l,.js .hero-copy p{animation:none;opacity:1;transform:none}
  .js .sun{transform:translateX(-50%)}
  .js .rv{opacity:1;transform:none;transition:none}
}