/* Void design system — shared tokens + chrome (header/footer/buttons)
   Page-specific styles stay inline in each page. */

@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/inter-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --void:#0A0A0F; --bone:#ffffff; --ash:#bdbdbd; --smoke:#9a9a9a;
  --plum:#8052ff; --plum-text:#9673ff; --amber:#ffb829; --lichen:#15846e;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.22);
  --card:rgba(255,255,255,.03);
  --tag-leak-ink:#ff9b8f; --tag-leak-bg:rgba(255,99,99,.12);
  --tag-ok-ink:#7ee2a8; --tag-ok-bg:rgba(34,197,94,.12);
  --font:"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font:400 16px/1.55 var(--font);
  color:var(--bone); background:var(--void); -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px}

/* eyebrow / kicker */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font:600 12px/1 var(--font); letter-spacing:.05em; text-transform:uppercase;
  color:var(--bone);
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--plum)}
.eyebrow.plum{color:var(--plum-text)}

/* buttons — pill, sentence case */
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; cursor:pointer;
  font:600 14px/1 var(--font); letter-spacing:.01em;
  padding:14px 24px; border-radius:var(--radius); border:1px solid transparent;
  transition:transform .05s ease, opacity .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn.primary{background:var(--plum); color:var(--bone)}
.btn.primary:hover{opacity:.88}
.btn.primary:active{transform:translateY(1px)}
.btn.ghost{background:transparent; color:var(--bone); border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--bone)}
.btn.sm{padding:11px 18px}
.btn:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible{
  outline:2px solid var(--plum); outline-offset:2px;
}

/* header */
header{
  position:sticky; top:0; z-index:20;
  background:rgba(10,10,15,.72); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{font-weight:600; letter-spacing:.02em; font-size:18px; text-decoration:none; color:var(--bone); display:inline-flex; align-items:center; gap:11px}
.brand-mark{width:30px; height:30px; display:block; flex:none}
.brand-word{font-weight:300; font-size:20px; letter-spacing:-.01em; line-height:1}
.brand-word .rex{font-weight:700; color:var(--plum); border-bottom:2px solid var(--plum); padding-bottom:2px}
.nav-links{display:flex; align-items:center; gap:26px}
.nav-links a{font-size:14px; color:var(--smoke); text-decoration:none; transition:color .15s ease}
.nav-links a:hover{color:var(--bone)}
.nav-links a.btn{color:var(--bone)}
.back{font-size:14px; color:var(--smoke); text-decoration:none}
.back:hover{color:var(--bone)}

/* mobile menu */
.menu-btn{display:none; background:none; border:1px solid var(--line-strong); border-radius:12px; color:var(--bone); padding:8px 10px; cursor:pointer}
.menu-btn svg{display:block}
.mobile-menu{display:none}
@media(max-width:720px){
  .nav-links{display:none}
  .menu-btn{display:block}
  .mobile-menu.open{
    display:flex; flex-direction:column; gap:4px;
    border-top:1px solid var(--line); padding:12px 24px 18px;
  }
  .mobile-menu a{padding:12px 0; font-size:16px; color:var(--ash); text-decoration:none; border-bottom:1px solid var(--line)}
  .mobile-menu a:last-child{border-bottom:0}
  .mobile-menu a.btn{margin-top:10px; justify-content:center; color:var(--bone); border-bottom:0}
}

/* footer */
footer{border-top:1px solid var(--line); color:var(--smoke); font-size:14px}
footer .inner{max-width:1200px; margin:0 auto; padding:48px 24px 60px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
footer .brand{color:var(--bone)}
footer p{margin:12px 0 0; max-width:420px; line-height:1.6; color:var(--smoke)}
footer a{color:var(--bone); text-decoration:none}
footer a:hover{color:var(--plum)}

/* scroll reveal — only hides when JS is running (html.js), no-op under reduced motion */
.reveal{opacity:1}
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{opacity:0; transform:translateY(12px); transition:opacity .2s ease, transform .2s ease}
  html.js .reveal.in{opacity:1; transform:none}
}