@font-face{font-family:Europa;src:url('fonts/europa-grotesk-medium.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{
  --ink:#0c0a08; --ink2:#130f0b; --ink3:#1a140f; --line:#2a2119;
  --copper:#c9772f; --copper2:#d39a5e; --copperD:#9a5419;
  --cream:#f1e9df; --cream2:#e8dece; --creamLine:#d8ccbb;
  --muted:#b5a695; --dim:#7c6f60; --brown:#1a0e06; --brownMuted:#5e4c3b;
  --glow:176,106,50;
  --w:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:Europa,'Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.55;letter-spacing:-.018em;color:var(--cream);background:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:clip}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
img,video{display:block;max-width:100%}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px;position:relative}

h1,h2,h3{font-weight:500;letter-spacing:-.035em;line-height:1.02}
h1{font-size:clamp(40px,5.2vw,64px)}
h2{font-size:clamp(30px,3.4vw,44px)}
h3{font-size:19px;letter-spacing:-.02em;line-height:1.2}
p{color:var(--muted)}
.lead{font-size:18px;line-height:1.55}
.eyebrow{display:block;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--copper);margin-bottom:18px}
.copper{color:var(--copper)}
.small{font-size:13px;color:var(--dim)}

/* light band */
.light{background:var(--cream);color:var(--brown)}
.light p{color:var(--brownMuted)}
.light .eyebrow,.light .copper{color:var(--copperD)}
.light .small{color:#8a7865}

.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;background:radial-gradient(circle,rgba(var(--glow),.4),transparent 70%)}

/* buttons: pills */
.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px;border-radius:999px;background:var(--copper);color:#140b04;text-decoration:none;font-size:15px;letter-spacing:-.01em;transition:transform .3s cubic-bezier(.25,0,.11,1),background .2s}
.btn:hover{transform:translateY(-1px);background:var(--copper2)}
.btn.line{background:transparent;color:inherit;border:1px solid currentColor;border-color:rgba(241,233,223,.28)}
.btn.line:hover{border-color:var(--copper)}
.light .btn.line{border-color:rgba(26,14,6,.25)}
.btn.dark{background:var(--brown);color:var(--cream)}
.btn.dark:hover{background:#2a180b}
.btn.sm{height:36px;padding:0 16px;font-size:13.5px}
.btn .ar{font-family:'Space Mono',monospace;font-size:13px}

/* top bar + nav */
.topbar{background:var(--copper);color:var(--brown);text-align:center;font-size:13px;padding:8px 16px}
.topbar a{text-decoration:underline;text-underline-offset:3px}
nav{position:sticky;top:0;z-index:30;background:rgba(12,10,8,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:20px}
.logo{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.logo b{font-weight:500;font-size:19px;letter-spacing:-.03em}
.logo span{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.logo span i{font-style:normal;color:var(--copper)}
.links{display:flex;gap:26px;font-size:14px;color:var(--muted)}
.links a{text-decoration:none;transition:color .2s}
.links a:hover{color:var(--cream)}

section{padding:112px 0;position:relative}
.head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.head p{font-size:17px;max-width:440px;padding-bottom:6px}

footer{border-top:1px solid var(--line);padding:32px 0 44px;color:var(--dim);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}

/* entrance: a little bigger, zooms out, already at speed on the first frame */
.reveal{opacity:0;transform:scale(1.05)}
.reveal.in{opacity:1;transform:none;transition:transform 1.2s cubic-bezier(.25,0,.11,1),opacity .15s linear}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.reveal.in{transition:none}}

@media (max-width:900px){
  .links{display:none}
  .head{grid-template-columns:1fr;gap:16px;margin-bottom:40px}
  section{padding:80px 0}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .logo span{display:none}
  .lead{font-size:17px}
}