:root{
  --ink:#000;
  --text:#fff;
  --text-2:rgba(255,255,255,.66);
  --text-3:rgba(255,255,255,.40);
  --signal:#C9B87A;
  --signal-dim:rgba(201,184,122,.30);
  --line:rgba(255,255,255,.10);
  --f-display:'Instrument Serif',ui-serif,Georgia,serif;
  --f-body:'Barlow',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --gut:20px;
}
@media (min-width:768px){ :root{ --gut:40px } }
@media (min-width:1200px){ :root{ --gut:64px } }

*,*::before,*::after{ box-sizing:border-box }
html{ color-scheme:dark; background:#000 }
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--f-body); font-size:15px; line-height:1.5; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px }
h1,h2,h3,p,ul,ol{ margin:0 }
ul,ol{ padding:0 }

.nav{
  position:fixed; top:16px; left:0; right:0; z-index:60;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 var(--gut);
}
.nav .brand{ justify-self:start; display:flex; align-items:center; gap:9px }
.nav .brand .mark{ width:34px; height:34px; display:block }
.nav .brand .wm{
  font-family:var(--f-display); font-style:italic; font-size:25px;
  letter-spacing:-.02em; transform:translateY(-1px);
}
.navpill{
  display:none; justify-self:center;
  align-items:center; gap:2px; padding:6px; border-radius:9999px;
  background:rgba(255,255,255,.01);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.1);
}
@media (min-width:1024px){ .navpill{ display:flex } }
.navpill a{
  padding:8px 14px; border-radius:9999px;
  font-size:13px; font-weight:500; color:rgba(255,255,255,.9);
}
.navpill a:hover,.navpill a.on{ color:#fff; background:rgba(255,255,255,.07) }
.nav-right{ display:flex; align-items:center; gap:8px; justify-self:end }
.nav-ca{
  display:flex; align-items:center; gap:8px;
  max-width:min(42vw, 320px); height:44px;
  padding:0 12px 0 14px; border-radius:9999px;
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px var(--line);
  cursor:pointer; min-width:0;
}
.nav-ca-k{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; color:var(--signal); flex:none }
.nav-ca-v{
  font-family:var(--f-mono); font-size:11px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
  color:rgba(255,255,255,.86);
}
.nav-ca.empty .nav-ca-v{ color:var(--text-3) }
.icon-btn{
  width:44px; height:44px; border-radius:9999px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px var(--line);
}
.icon-btn svg{ width:17px; height:17px }
.btn-solid{
  display:inline-flex; align-items:center;
  background:#fff; color:#000;
  padding:11px 16px; border-radius:9999px;
  font-size:13px; font-weight:600; white-space:nowrap;
}
@media (max-width:720px){
  .nav-ca{ max-width:38vw; padding:0 10px }
  .icon-btn{ display:none }
}

.page{
  padding:120px var(--gut) 80px;
  max-width:920px; margin:0 auto;
}
.kicker{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-3);
}
.page h1{
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(2.4rem,7vw,4.4rem); line-height:.95; letter-spacing:-.03em;
  margin:16px 0 28px;
}
.lede{ font-size:18px; font-weight:300; line-height:1.55; color:var(--text-2); max-width:52ch }
.block{ margin-top:48px }
.block h2{
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(1.6rem,4vw,2.2rem); margin-bottom:14px;
}
.block p,.block li{ color:var(--text-2); font-weight:300; line-height:1.65 }
.block p + p{ margin-top:12px }
.block ol,.block ul{ margin:12px 0 0 1.2em }
.block li + li{ margin-top:8px }
.steps{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:14px }
.steps li{
  padding:18px 20px; border-radius:18px;
  background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px var(--line);
}
.steps .n{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--signal) }
.steps h3{ font-size:17px; font-weight:500; margin:6px 0 8px; color:#fff }
.grid{ display:grid; gap:14px; margin-top:18px }
@media (min-width:720px){ .grid.two{ grid-template-columns:1fr 1fr } }
.card{
  padding:20px; border-radius:18px;
  background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px var(--line);
}
.card h3{ font-size:16px; font-weight:500; margin-bottom:8px }
.card p,.card li{ color:var(--text-2); font-weight:300; font-size:14px; line-height:1.55 }
.mono{ font-family:var(--f-mono); font-size:13px; color:var(--signal) }
.swatch{ display:flex; align-items:center; gap:12px; margin-top:10px }
.swatch i{ width:28px; height:28px; border-radius:8px; display:block; flex:none }
.btn-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px }
.btn-row a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:9999px;
  box-shadow:inset 0 0 0 1px var(--line); font-size:13px; font-weight:500;
}
.btn-row a.solid{ background:#fff; color:#000; box-shadow:none }

.foot{
  background:#000; border-top:1px solid var(--line);
  padding:56px var(--gut) 48px;
  display:flex; flex-direction:column; gap:34px;
}
.foot-cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px;
}
@media (min-width:820px){ .foot-cols{ grid-template-columns:1.5fr repeat(4,minmax(0,1fr)); gap:32px } }
.foot-cols h4{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:14px; font-weight:400;
}
.foot-cols a{ display:block; font-size:14px; line-height:2; color:rgba(255,255,255,.7) }
.foot-cols a:hover,.foot-cols a.on{ color:#fff }
.foot-mark{ display:flex; align-items:center; gap:12px; font-family:var(--f-display); font-style:italic; font-size:2rem }
.foot-mark .mark{ width:34px; height:34px }
.foot-blurb{ font-size:14px; font-weight:300; line-height:1.6; color:var(--text-3); max-width:32ch; margin-top:14px }
.legal{ font-size:11.5px; font-weight:300; line-height:1.6; color:var(--text-3); max-width:80ch }