/* ---------------------------------------------------------------------------
   DSober site chrome — the header and footer shared by EVERY page.

   Loaded by docs/index.html and by the sub-pages (contact/privacy/terms).
   This is the single definition: do not restyle a nav or footer inline in a
   page. The landing page previously carried its own copy and the two drifted.

   Deliberately dependency-free (literal colours, no CSS custom properties) so
   it can be loaded next to any page's own stylesheet without inheriting or
   requiring one.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Site header — matches the landing page's fixed glass nav (docs/index.html).
   The landing page animates from translucent to solid on scroll via app.js;
   sub-pages start with content directly under the bar, so they use the solid
   state from the outset and need no JS.
   --------------------------------------------------------------------------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px clamp(18px, 5vw, 56px);
  background: rgba(8, 15, 30, .82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.site-nav .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.site-nav .brand:hover { text-decoration: none; }
.site-nav .mark-wrap { position: relative; display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; }
.site-nav .mark-glow { position: absolute; inset: -6px; opacity: .7; filter: blur(4px);
  background: radial-gradient(closest-side, rgba(94, 154, 255, .6), transparent 70%); }
.site-nav .mark { position: relative; width: 34px; height: 34px; flex: none; object-fit: contain; }
.site-nav .wordmark { font-weight: 700; font-size: 18px; letter-spacing: .04em; color: #fff; }
.nav-right { display: flex; align-items: center; gap: 30px; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; color: #AEB7C9; }
.nav-links a { color: inherit; text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: #fff; text-decoration: none; }
.npill {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  /* `normal`, not the inherited body 1.65 — the landing page sets no body
     line-height, and this is what keeps both navs the same height. */
  line-height: normal;
  padding: 10px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .25s ease, background .25s ease;
}
.npill:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); text-decoration: none; }
@media (max-width: 768px) { .nav-links { display: none; } }

/* Landing page only: the bar starts translucent over the hero and solidifies on
   scroll. app.js toggles `at-top`. Sub-pages omit it — their content begins
   directly under the bar, so the solid default is already correct. */
.site-nav.at-top { background: rgba(8, 15, 30, .28); border-bottom-color: rgba(255, 255, 255, .06); }
.site-nav { transition: background .35s ease, border-color .35s ease; }

/* ---------------------------------------------------------------------------
   Site footer — same structure, content and order as the landing page's.
   --------------------------------------------------------------------------- */
.site-footer {
  /* The bar spans the viewport so its top border runs edge to edge, and its
     contents sit in a fixed 1120px column on EVERY page. This deliberately does
     not track the page's own content width: the footer is global chrome, so its
     items must land in the same place whichever page you are on. */
  --foot-inner: 1120px;
  border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 6vh;
  padding: clamp(36px, 5vw, 52px) clamp(18px, 5vw, 56px) 56px;
}
.site-footer .foot-row,
.site-footer .foot-meta { max-width: var(--foot-inner); margin-left: auto; margin-right: auto; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand img { width: 30px; height: 30px; object-fit: contain; opacity: .92; }
.foot-brand .names { line-height: 1.25; }
.foot-brand .name { font-weight: 700; font-size: 16px; letter-spacing: .03em; color: #fff; }
.foot-brand .tagline { font-size: 12.5px; color: #7E8CA6; }
.foot-links { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 500; color: #A6AFC1; flex-wrap: wrap; }
.foot-links a { color: inherit; text-decoration: none; transition: color .2s; }
.foot-links a:hover { color: #fff; text-decoration: none; }
.foot-meta { margin-top: 22px; font-size: 12px; color: #5C6781; }