:root{
  --void:#0a0c16;
  --depth:#141a2e;
  --depth-2:#1b2340;
  --paper:#f2eee3;
  --paper-dim:#e7e1d1;
  --dawn:#d6a34c;
  --dawn-soft:#e8c483;
  --rust:#9c4b32;
  --mist:#8891ac;
  --ink:#0a0c16;
  --line: rgba(242,238,227,0.12);

  --display: 'Fraunces', serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--void);
  color:var(--paper);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
section{position:relative;}

::selection{background:var(--dawn); color:var(--ink);}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--dawn); outline-offset:3px;
}

/* ---------- NAV ---------- */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  background:rgba(10,12,22,0.7);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
header.nav.scrolled{
  border-bottom:1px solid var(--line);
  background:rgba(10,12,22,0.92);
}
.nav-row{display:flex; align-items:center; justify-content:space-between;}
.brand{
  font-family:var(--display); font-weight:500; font-style:italic;
  font-size:1.15rem; letter-spacing:.02em;
}
.brand span{color:var(--dawn); font-style:normal;}
nav.links{display:flex; gap:26px; align-items:center;}
nav.links a{
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mist); transition:color .2s ease;
}
nav.links a:hover, nav.links a.active{color:var(--paper);}
.nav-cta{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink); background:var(--dawn);
  padding:10px 18px; border-radius:2px; transition:background .2s ease, transform .2s ease;
}
.nav-cta:hover{background:var(--dawn-soft); transform:translateY(-1px);}

/* ---------- SHARED TYPE / BUTTONS ---------- */
.kicker{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rust); margin-bottom:20px;
  display:flex; align-items:center; gap:12px;
}
.btn-primary{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.03em;
  text-transform:uppercase; background:var(--dawn); color:var(--ink);
  padding:16px 30px; border-radius:2px; border:1px solid var(--dawn);
  transition:transform .2s ease, background .2s ease; display:inline-block;
}
.btn-primary:hover{background:var(--dawn-soft); transform:translateY(-2px);}
.btn-ghost{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.03em;
  text-transform:uppercase; color:var(--paper); padding:16px 30px;
  border-radius:2px; border:1px solid var(--line);
  transition:border-color .2s ease, background .2s ease; display:inline-block;
}
.btn-ghost:hover{border-color:var(--dawn); background:rgba(214,163,76,0.07);}
.btn-ghost.on-paper{color:var(--ink); border-color:rgba(10,12,22,0.25);}
.btn-ghost.on-paper:hover{border-color:var(--rust); background:rgba(156,75,50,0.06);}

/* ---------- FOOTER ---------- */
footer{background:var(--void); padding:50px 0; border-top:1px solid var(--line);}
.footer-row{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
footer .brand{font-size:1rem;}
footer .fine{font-family:var(--mono); font-size:.72rem; color:var(--mist); letter-spacing:.03em;}
footer nav{display:flex; gap:22px; flex-wrap:wrap;}
footer nav a{font-size:.78rem; color:var(--mist);}
footer nav a:hover{color:var(--paper);}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .btn-primary:hover, .nav-cta:hover{transform:none;}
}

@media (max-width:720px){
  nav.links{display:none;}
  .wrap{padding:0 22px;}
}