/* =========================================================================
   base.css — shared across every page (index / commands / embed-builder)
   Variables, reset, nav, section shell, footer, buttons, grain/vignette.
   Page-specific styles (hero, cards, command list, embed builder form)
   live in their own stylesheet and are loaded on top of this one.
   ========================================================================= */

:root{
  --bg:#070303;
  --bg-soft:#100505;
  --ink:#fbeceb;
  --body:#d9c2bf;
  --dim:#a4817d;
  --line:#3d1418;
  --line-soft:#26090c;
  --panel:#0e0505;
  --red:#ff223f;
  --red-soft:#ff5468;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--body);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--red); color:#0a0303; }

a{ color:inherit; text-decoration:none; }

.serif{ font-family:'Fraunces', serif; }

@media (prefers-reduced-motion: no-preference){
  .breathe{ animation: breathe 3.4s ease-in-out infinite; }
  @keyframes breathe{
    0%,100%{ opacity:.35; }
    50%{ opacity:1; }
  }
  .fade-up{
    opacity:0;
    transform:translateY(14px);
    animation: fadeUp .9s cubic-bezier(.16,1,.3,1) forwards;
  }
  @keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }
}
@media (prefers-reduced-motion: reduce){
  .fade-up{ opacity:1; }
}

/* ---------- grain / vignette ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:30;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- nav: fixed LEFT SIDEBAR, horizontal text, opaque ----------
   Shared literal structure on every page: nav > .brand + .navlinks + .nav-cta
   Restyled here so every page gets the sidebar with zero markup changes. */
nav{
  position:fixed; top:0; left:0; bottom:0; z-index:40;
  width:220px;
  display:flex; flex-direction:column; align-items:flex-start;
  justify-content:flex-start; gap:44px;
  padding:32px 26px;
  background:#0a0303; /* fully opaque — never blended with page content */
  border-right:1px solid var(--line);
}
.brand{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:19px;
  letter-spacing:.02em;
  color:var(--ink);
  display:flex; align-items:center; gap:9px;
}
.dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px rgba(255,34,63,.6);
}
.navlinks{ display:flex; flex-direction:column; gap:20px; font-size:14px; }
.navlinks a{
  color:var(--dim); letter-spacing:.02em;
  transition:color .25s ease, padding-left .25s ease;
  position:relative;
}
.navlinks a:hover, .navlinks a:focus-visible{ color:var(--ink); padding-left:6px; }
.navlinks a::before{
  content:''; position:absolute; left:-14px; top:50%; translate:0 -50%;
  width:0; height:1px; background:var(--red);
  transition:width .25s ease;
}
.navlinks a:hover::before, .navlinks a:focus-visible::before{ width:8px; }
/* current-page indicator, set via aria-current="page" in each page's nav */
.navlinks a[aria-current="page"]{ color:var(--red-soft); }
.navlinks a[aria-current="page"]::before{ width:8px; background:var(--red-soft); }

.nav-cta{
  margin-top:auto;
  border:1px solid var(--red); padding:10px 18px; border-radius:100px;
  font-size:13px; color:var(--red); text-align:center; width:100%;
  transition:border-color .3s ease, background .3s ease, color .3s ease;
}
.nav-cta:hover, .nav-cta:focus-visible{ background:var(--red); color:#0a0303; }

/* every page's content needs to clear the sidebar. Using :not(nav) here
   beats section's own `margin:0 auto` regardless of source order, and
   catches direct children whether a page wraps content in <main> or not. */
body > *:not(nav):not(.grain){
  margin-left:220px;
}
body > main > section{ margin-left:0; } /* main already carries the offset */

@media (max-width:860px){
  nav{
    width:100%; height:auto; flex-direction:row; align-items:center;
    top:auto; bottom:0; left:0; right:0;
    padding:14px 18px; border-right:none; border-top:1px solid var(--line);
    gap:18px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  nav::-webkit-scrollbar{ display:none; }
  .navlinks{ flex-direction:row; gap:16px; }
  .navlinks a{ padding:6px 2px; } /* wider tap target without disturbing the row's height */
  .nav-cta{ margin-top:0; width:auto; white-space:nowrap; flex-shrink:0; }
  body > *:not(nav):not(.grain){
    margin-left:0; padding-bottom:78px;
  }

  section{
    padding:90px clamp(16px,6vw,32px) 60px;
  }
  .section-head{ margin-bottom:36px; }
  h2.serif{ max-width:none; }
}

@media (max-width:480px){
  section{ padding:78px 18px 48px; }
  .btn{ padding:12px 22px; font-size:14px; }
  footer{ padding:44px 18px 40px; }
}

/* ---------- buttons (shared component) ---------- */
.btn{
  padding:13px 28px;
  border-radius:100px;
  font-size:14.5px;
  letter-spacing:.01em;
  transition:transform .35s cubic-bezier(.16,1,.3,1), background .3s ease, border-color .3s ease, opacity .3s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-primary{
  background:var(--red); color:#0a0303; font-weight:500;
}
.btn-primary:hover{ transform:translateY(-2px); background:var(--red-soft); }
.btn-ghost{
  border:1px solid var(--line); color:var(--body);
}
.btn-ghost:hover{ border-color:var(--red); color:var(--red-soft); transform:translateY(-2px); }

/* ---------- section shell (used by every inner page) ---------- */
section{
  padding:120px clamp(20px,6vw,64px);
  max-width:1120px;
  margin:0 auto;
}
.section-head{
  margin-bottom:56px;
}
.kicker{
  color:var(--red-soft); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  display:block; margin-bottom:14px;
}
h2.serif{
  font-weight:300;
  font-size:clamp(1.9rem, 4vw, 2.7rem);
  color:var(--ink);
  letter-spacing:-.01em;
  max-width:20ch;
}
.section-sub{
  margin-top:16px; color:var(--dim); max-width:52ch; font-size:15.5px; line-height:1.75;
}

hr.divider{
  border:none; height:1px;
  background:linear-gradient(to right, transparent, var(--line), transparent);
  max-width:1120px; margin:0 auto;
}

/* ---------- footer (shared) ---------- */
footer{
  padding:60px clamp(20px,6vw,64px) 50px;
  display:flex; flex-wrap:wrap; gap:24px;
  align-items:center; justify-content:space-between;
  color:var(--dim); font-size:13px;
}
footer .brand{ font-size:16px; }
.foot-links{ display:flex; gap:26px; }
.foot-links a{ color:var(--dim); transition:color .3s ease; }
.foot-links a:hover{ color:var(--red-soft); }

.invisible-hover{ transition:opacity .5s ease; }