/* =========================================================================
   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:#111214;
  --bg-soft:#17181b;
  --ink:#e7e8eb;
  --ink-muted:#9a9da4; /* alias of --dim; several pages (dashboard/legal) reference
                           this name specifically */
  --body:#c6c8cd;
  --dim:#92959d;
  --line:#36383e;
  --line-soft:#27292e;
  --panel:#17181b;
  --panel-soft:#1d1e22;
  --red:#d6d8dd;
  --red-soft:#aeb1b9;
  --accent-rgb:214,216,221;
  --on-accent:#111214;
  --surface-deep:#0c0d0f;
  --shadow-soft:0 20px 50px rgba(0,0,0,.45);
  --shadow-lift:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--accent-rgb),.08);
}

*{ box-sizing:border-box; margin:0; padding:0; }
/* background set here too (not just on body) so overscroll/rubber-band
   areas past the end of the page show the site's dark bg instead of the
   browser's default gray/white canvas underneath */
html{ scroll-behavior:smooth; color-scheme:dark; background:var(--bg); }

/* Without this, native controls (checkboxes, <select> dropdowns, date
   pickers, etc.) render with the OS's light-theme chrome in some browsers —
   the stray white boxes on embed-builder/commands were exactly this.
   color-scheme:dark above handles most of it; this is the manual fallback
   for browsers/controls that don't fully respect it. */
input, textarea, select{
  color-scheme:dark;
  accent-color:var(--red);
}

body{
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(var(--accent-rgb),.08), transparent 60%),
    radial-gradient(900px 500px at -10% 90%, rgba(var(--accent-rgb),.05), transparent 60%),
    var(--bg);
  color:var(--body);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* NOT overflow-x:hidden — setting overflow-x alone on <body> forces the
     browser to silently convert overflow-y to `auto` (a CSS spec quirk:
     you can't mix visible on one axis with non-visible on the other), which
     turns <body> into its own scroll container and breaks every
     position:sticky element on the page (the card stack among them —
     it silently degrades to position:relative). `clip` avoids the
     conversion because it doesn't establish a scrollport, so horizontal
     overflow is still contained without touching sticky at all. */
  overflow-x:clip;
  overflow-y:visible;
}

::selection{ background:var(--red); color:var(--on-accent); }

/* consistent, theme-matched focus ring for keyboard users instead of the
   default blue browser outline, which clashed badly against the red/black
   palette and was easy to miss against the dark background */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--red-soft);
  outline-offset:3px;
  border-radius:4px;
}

/* scrollbar, themed instead of the default grey system bar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--red); }
*{ scrollbar-color:var(--line) var(--bg); scrollbar-width:thin; }

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

.hire-link{
  color:var(--red-soft);
  font-weight:600;
  text-decoration:none;
  animation:hireGlow 1.6s ease-in-out infinite alternate;
  transition:color .25s ease, transform .25s ease, text-shadow .25s ease;
}
.hire-link:hover,
.hire-link:focus-visible{
  color:var(--ink);
  transform:translateY(-1px);
  text-shadow:0 0 16px rgba(var(--accent-rgb),.55);
}
@keyframes hireGlow{
  from { text-shadow:0 0 6px rgba(var(--accent-rgb),.22); }
  to { text-shadow:0 0 18px rgba(var(--accent-rgb),.65); }
}

.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:var(--surface-deep); /* fully opaque — never blended with page content */
  border-right:1px solid var(--line);
  box-shadow:1px 0 0 rgba(var(--accent-rgb),.04), 30px 0 60px -30px rgba(0,0,0,.6);
}
.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(var(--accent-rgb),.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); }
.navlinks a:active{ transform:translateY(1px); }

.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:var(--on-accent); }

/* 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:var(--on-accent); font-weight:500;
  box-shadow:0 8px 24px -8px rgba(var(--accent-rgb),.55);
}
.btn-primary:hover{ transform:translateY(-2px); background:var(--red-soft); box-shadow:0 14px 32px -10px rgba(var(--accent-rgb),.7); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{
  border:1px solid var(--line); color:var(--body);
  background:rgba(255,255,255,.015);
}
.btn-ghost:hover{ border-color:var(--red); color:var(--red-soft); transform:translateY(-2px); }
.btn-ghost:active{ transform:translateY(0); }

/* Shared elevated-panel treatment for components that need a raised surface. */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.card:hover{ border-color:rgba(var(--accent-rgb),.4); box-shadow:var(--shadow-soft); }

/* ---------- 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;
  text-wrap:balance;
}
.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; }

/* ---------- scroll reveal (shared pattern, wired up per-page in JS) ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* cards/tiles slide in from the right instead of drifting up */
.reveal-right{ opacity:0; transform:translateX(48px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal-right.in{ opacity:1; transform:translateX(0); }

/* stagger siblings slightly so a row of cards doesn't snap in as one block */
.grid2 .reveal-right:nth-child(2){ transition-delay:.08s; }

@media (prefers-reduced-motion: reduce){ .reveal, .reveal-right{ opacity:1; transform:none; } }

/* =========================================================================
   polish layer — refinements on top of the shared components. only uses
   theme tokens, so it looks right in every theme.
   ========================================================================= */
html{ scroll-padding-top:24px; }
body{ text-rendering:optimizeLegibility; }
body::before{ /* faint top light so flat greys have some depth */
  content:''; position:fixed; inset:0 0 auto 0; height:420px; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.045), transparent);
}
nav{ backdrop-filter:blur(14px); }
.navlinks a[aria-current="page"]{ color:var(--ink); }
.btn{ font-weight:500; }
.btn-primary{
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 10px 26px -12px rgba(var(--accent-rgb),.5);
}
.btn-ghost{ background:rgba(var(--accent-rgb),.03); }
.btn-ghost:hover{ background:rgba(var(--accent-rgb),.07); }
.card{
  border-radius:20px;
  background:linear-gradient(180deg, var(--panel-soft), var(--panel));
}
.card:hover{ transform:translateY(-3px); }
h2.serif{ letter-spacing:-.02em; line-height:1.15; }
.kicker{ letter-spacing:.24em; font-size:11.5px; }
input, textarea, select{ transition:border-color .2s ease, box-shadow .2s ease; }
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--red-soft);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);
}
::-webkit-scrollbar-thumb:hover{ background:var(--dim); }