/* chrome.css — canonical site chrome (nav + footer + mobile drawer).
   Self-contained: works on pages that load it WITHOUT tokens.css (the
   .site-header pages, blogs) by falling back to literal values. On pages
   that also load tokens.css, the canonical custom properties are inherited
   so everything stays in sync. Loaded after the page's own CSS so the
   canonical chrome wins. */

:root {
  --chrome-gold: var(--c-gold, #C9A961);
  --chrome-ink:  var(--c-ink, #0E0E0C);
  --chrome-bg:   var(--c-bg, #F7F4EE);
  --chrome-f-display: var(--f-display, "Fraunces", Georgia, serif);
  --chrome-f-body: var(--f-body, "Inter", system-ui, sans-serif);
  --chrome-f-mono: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  --chrome-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Reserve space for the fixed nav on pages that previously used an in-flow
   header (the homepage overlays its nav on a full-height hero and does NOT
   carry this class). */
body.has-fixed-nav { padding-top: 64px; }
@media (max-width: 768px) { body.has-fixed-nav { padding-top: 56px; } }

/* ── Nav ─────────────────────────────────────────────────────────── */
.v-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 48px;
  color: var(--chrome-bg);
  transition: background 500ms var(--chrome-ease), backdrop-filter 500ms, color 500ms, padding 400ms var(--chrome-ease), border-color 500ms;
  border-bottom: 1px solid transparent;
  box-sizing: border-box;
}
.v-nav.solid {
  background: rgba(247, 244, 238, 0.88);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  color: var(--chrome-ink);
  border-bottom-color: rgba(14, 14, 12, 0.08);
  padding: 16px 48px;
}
.v-nav .wordmark {
  font-family: var(--chrome-f-display);
  font-size: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: inherit;
  text-decoration: none;
}
.v-nav ul {
  display: flex; gap: 36px;
  list-style: none; padding: 0; margin: 0;
  font-size: 13px;
  letter-spacing: 0.025em;
}
.v-nav li a { position: relative; padding: 4px 0; opacity: 0.8; transition: opacity 300ms; color: inherit; text-decoration: none; }
.v-nav li a:hover { opacity: 1; }
.v-nav li a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 400ms var(--chrome-ease);
}
.v-nav li a:hover::after { transform: scaleX(1); }
.v-nav .nav-cta {
  font-family: var(--chrome-f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 20px;
  border: 1px solid currentColor;
  border-radius: 100px;
  opacity: 0.9;
  color: inherit;
  text-decoration: none;
  transition: opacity 300ms, background 300ms, color 300ms;
}
.v-nav .nav-cta:hover { opacity: 1; background: var(--chrome-gold); border-color: var(--chrome-gold); color: var(--chrome-ink); }

/* ── Mobile hamburger + drawer ───────────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  cursor: pointer;
  background: none;
  border: none;
  color: currentColor;
}
.nav-hamburger span {
  display: block;
  width: 22px; height: 1px;
  background: currentColor;
  transition: transform 350ms var(--chrome-ease), opacity 350ms;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mob-nav-drawer {
  display: none;
  position: fixed; inset: 0;
  z-index: 49;
  background: var(--chrome-ink);
  color: var(--chrome-bg);
  padding: 100px 48px 60px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 48px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--chrome-ease);
}
.mob-nav-drawer.open { opacity: 1; pointer-events: auto; }
.mob-nav-drawer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.mob-nav-drawer li a {
  font-family: var(--chrome-f-display);
  font-weight: 300;
  font-size: clamp(36px, 10vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--chrome-bg);
  opacity: 0.85;
  transition: opacity 250ms;
  display: block;
  padding: 6px 0;
  text-decoration: none;
}
.mob-nav-drawer li a:hover { opacity: 1; }
.mob-nav-phone {
  display: block;
  font-family: var(--chrome-f-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.5);
  text-decoration: none;
  padding-top: 8px;
  border-top: 1px solid rgba(247, 244, 238, 0.12);
}

@media (max-width: 880px) {
  .v-nav ul { display: none; }
  .v-nav .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .mob-nav-drawer { display: flex; }
}
@media (max-width: 768px) {
  .v-nav { padding: 16px 24px; }
  .v-nav.solid { padding: 14px 24px; }
}

/* ── Footer ──────────────────────────────────────────────────────── */
.v-footer {
  background: var(--chrome-ink);
  color: var(--chrome-bg);
  padding: 80px 0 40px;
  margin-top: 0;
}
.v-footer .wrap {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 64px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  box-sizing: border-box;
}
.v-footer h6 {
  font-family: var(--chrome-f-mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(247, 244, 238, 0.4);
  margin: 0 0 20px;
}
.v-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: rgba(247, 244, 238, 0.75); }
.v-footer a { color: inherit; text-decoration: none; transition: color 280ms; }
.v-footer a:hover { color: var(--chrome-gold); }
.v-footer .brand-line {
  font-family: var(--chrome-f-display);
  font-size: clamp(28px, 3.5vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 28px;
  color: var(--chrome-bg);
}
.v-footer .disclosure {
  font-size: 12px;
  color: rgba(247, 244, 238, 0.5);
  line-height: 1.7;
  max-width: 70ch;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid rgba(247, 244, 238, 0.12);
}
@media (max-width: 880px) {
  .v-footer .wrap { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .v-footer .brand-line { font-size: clamp(22px, 6vw, 36px); }
}
@media (max-width: 480px) {
  .v-footer .wrap { grid-template-columns: 1fr; gap: 32px; }
}