/* ==========================================================================
   Vexanto — shared site chrome
   --------------------------------------------------------------------------
   Everything the header, footer and buttons need lives here and nowhere else.
   Page files keep only the CSS for their own sections. If a change belongs to
   the nav, the footer or a button, it belongs in this file.
   ========================================================================== */

:root{
  --ink:#14171F;
  --ink-soft:#1B1F29;
  --paper:#F5F2EA;
  --amber:#E2A33D;
  --amber-dim:#B9822F;
  --slate:#8B96A5;
  --forest:#5C8374;
  --rust:#B4573F;
  --rule:#2A2F3B;
  --rule-light:#E1DCCC;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Fraunces', serif; font-weight:500; line-height:1.1; letter-spacing:-0.01em; }
.mono{ font-family:'JetBrains Mono', monospace; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

.wrap{ max-width:1120px; margin:0 auto; padding:0 32px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:11px 22px; border-radius:3px;
  font-size:0.92rem; font-weight:500; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.btn-amber{ background:var(--amber); color:var(--ink); }
.btn-amber:hover{ background:#eeb457; }
.btn-line{ border-color:var(--rule); color:var(--paper); background:transparent; }
.btn-line:hover{ border-color:var(--amber); }
.btn-white{ background:var(--paper); color:var(--ink); }
.btn-white:hover{ background:#ffffff; }

/* ---------- header ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(20,23,31,0.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:16px; }
.logo{
  font-family:'Fraunces', serif; font-size:1.3rem; font-weight:600;
  letter-spacing:-0.01em; display:flex; align-items:center; gap:10px;
  text-decoration:none; flex:none;
}
.logo img{ width:30px; height:30px; border-radius:7px; }
.navlinks{ display:flex; gap:28px; align-items:center; }
.navlinks a{ font-size:0.94rem; color:var(--slate); text-decoration:none; transition:color .15s; }
.navlinks a:hover{ color:var(--paper); }
.navlinks a.active{ color:var(--paper); }

.navtoggle{
  display:none; width:42px; height:42px; padding:0; flex:none;
  background:transparent; border:1px solid var(--rule); border-radius:4px;
  cursor:pointer; align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.navtoggle span{
  display:block; width:18px; height:2px; background:var(--paper); border-radius:2px;
  transition:transform .18s ease, opacity .18s ease;
}
nav.open .navtoggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
nav.open .navtoggle span:nth-child(2){ opacity:0; }
nav.open .navtoggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--rule); padding:44px 0 56px; }
.site-footer .foot-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:32px; flex-wrap:wrap; margin-bottom:34px;
}
.site-footer .foot-blurb{ color:var(--slate); font-size:0.9rem; max-width:34ch; margin-top:12px; }
.site-footer .foot-links{ display:flex; gap:28px; flex-wrap:wrap; }
.site-footer .foot-links a{ color:var(--slate); font-size:0.9rem; text-decoration:none; }
.site-footer .foot-links a:hover{ color:var(--paper); }
.site-footer .foot-fine{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:24px; border-top:1px solid var(--rule);
  color:var(--slate); font-size:0.85rem;
}
.site-footer .foot-fine a{ text-decoration:none; }
.site-footer .foot-fine a:hover{ color:var(--paper); }

/* ---------- mobile ---------- */
@media (max-width:880px){
  .wrap{ padding:0 22px; }
  .navtoggle{ display:flex; }
  .navlinks{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-bottom:1px solid var(--rule);
    padding:6px 22px 18px;
  }
  nav.open .navlinks{ display:flex; }
  .navlinks a{
    padding:14px 0; font-size:1rem; color:var(--paper);
    border-bottom:1px solid var(--rule);
  }
  .navlinks a:last-child{ border-bottom:0; }
  .navlinks a.btn, .navlinks a.btn-white, .navlinks a.btn-amber{
    margin-top:14px; text-align:center; border-bottom:0;
  }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  html{ scroll-behavior:auto; }
}