/* =========================================================
   chrome.css — the shared shell: nav, buttons, footer.

   Loaded by EVERY page, before its page stylesheet
   (home.css on the homepage, styles.css everywhere else).

   This file is the ONLY place the nav, buttons and footer are
   styled. Do not restate these rules in home.css or styles.css —
   the whole point is that the shell cannot drift between pages.

   Its tokens are namespaced --c-* so they never collide with
   a page sheet's palette.
   ========================================================= */

:root {
  color-scheme: light;

  --c-paper:    #f7f8fa;
  --c-ink:      #23262b;   /* warm graphite (was navy) */
  --c-ink-soft: #52606d;
  --c-ink-faint:#616c7c;   /* AA (4.9:1) */
  --c-rule:     #e4e7ea;
  --c-verm:     #c2410c;   /* persimmon accent */
  --c-gold:     #23262b;   /* CTA is solid graphite now */
  --c-on-gold:  #f7f8fa;   /* paper text on the graphite CTA */
  --c-on-ink:   #f7f8fa;
  --c-nav-bg:   rgba(247, 248, 250, 0.72);
  --c-primary-hover: #3d434b;

  --nav-h: 63px;   /* single source of truth for nav height — do NOT redefine in home.css/styles.css */
  --c-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --c-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --c-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --c-paper:    #0f1113;
  --c-ink:      #e8eaee;
  --c-ink-soft: #a8b0b9;
  --c-ink-faint:#7c848e;
  --c-rule:     #2a2f35;
  --c-verm:     #ff7a3c;   /* warmed persimmon for dark bg contrast */
  --c-gold:     #e8eaee;   /* CTA inverts to paper on dark */
  --c-on-gold:  #0f1113;
  --c-on-ink:   #0f1113;
  --c-nav-bg:   rgba(15, 17, 19, 0.72);
  --c-primary-hover: #ffffff;
}

/* ============================================================
   NAV — the shared shell. This file is loaded on EVERY page
   (index/home.css, subpages/styles.css, and all blog pages).
   The <nav class="nav"> markup + these styles are the single
   source of truth for the navbar sitewide.

   >>> ANY navbar change (height, wordmark, links, colors,
   spacing, hover/active states) MUST be made HERE and ONLY here. <<<

   Do NOT add .nav* rules or redefine --nav-h in home.css or
   styles.css. Those files load AFTER chrome.css, so anything
   they define overrides the shell and drifts the nav on some
   pages but not others (e.g. subpages ended up 56px while the
   homepage was 63px because styles.css re-declared --nav-h).
   Page CSS may only *read* var(--nav-h) for content offsets.
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: var(--c-nav-bg);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--c-rule);
  transition: background-color 0.35s var(--c-ease), border-color 0.35s var(--c-ease);
}

.nav__inner {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__brand {
  font-family: var(--c-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  text-decoration: none;
  transition: color 0.18s var(--c-ease);
}
.nav__brand:hover { color: var(--c-verm); }

.nav__actions { display: flex; align-items: center; gap: 22px; }

/* ---------- Theme toggle (light/dark) ---------- */
.nav__theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--c-rule);
  cursor: pointer;
  color: var(--c-ink-soft);
  transition: color 0.18s var(--c-ease), border-color 0.18s var(--c-ease), background-color 0.18s var(--c-ease);
}
.nav__theme:hover { color: var(--c-ink); border-color: var(--c-ink); }
.nav__theme svg { width: 15px; height: 15px; display: block; }
.nav__theme .nav__theme-icon--sun { display: none; }
:root[data-theme="dark"] .nav__theme .nav__theme-icon--sun  { display: block; }
:root[data-theme="dark"] .nav__theme .nav__theme-icon--moon { display: none; }
.nav__links { display: flex; align-items: center; gap: 26px; list-style: none; }
.nav__link {
  font-family: var(--c-mono);
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-ink-soft);
  text-decoration: none;
  padding: 4px 2px;
  transition: color 0.18s var(--c-ease);
}
.nav__link:hover { color: var(--c-ink); }
.nav__link[aria-current="page"] { color: var(--c-verm); }

/* ---------- Mobile menu toggle (text label, mono, on-brand) ---------- */
.nav__toggle {
  display: none;
  min-width: 68px;
  height: 44px;
  padding: 0 12px;
  margin-right: -10px;
  background: transparent;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-family: var(--c-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--c-ink);
  text-transform: uppercase;
  transition: color 0.2s var(--c-ease);
}
.nav__toggle::before { content: "MENU"; }
.nav__toggle[aria-expanded="true"]::before { content: "CLOSE"; color: var(--c-verm); }
/* Hide the legacy bar spans (still in HTML across all pages; converted to CSS-only text via ::before) */
.nav__toggle-bar { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 0;
  font-family: var(--c-mono);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--c-ink);
  white-space: nowrap;
  transition: background-color 0.18s var(--c-ease), color 0.18s var(--c-ease);
}
.btn--primary { background: var(--c-gold); color: var(--c-on-gold); border-color: var(--c-gold); }
.btn--primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: var(--c-on-ink); }
.btn--ghost { background: transparent; color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-on-ink); }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--c-rule);
  padding: 40px 0 44px;
  color: var(--c-ink-faint);
  font-family: var(--c-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.footer a { color: var(--c-ink-soft); text-decoration: none; }
.footer a:hover { color: var(--c-verm); }
.footer__nav { display: flex; gap: 22px; }

/* ---------- Mobile shell ---------- */
@media (max-width: 640px) {
  .nav__toggle { display: inline-flex; }
  .nav__actions { gap: 10px; }
  .nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 10px;
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-ink);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s var(--c-ease), transform 0.22s var(--c-ease), visibility 0.22s var(--c-ease);
  }
  .nav__links.open { transform: none; opacity: 1; visibility: visible; }
  .nav__link { display: block; padding: 15px 28px; font-size: 0.86rem; min-height: 48px; }
  .nav__link[aria-current="page"] { color: var(--c-ink); }
}

@media (max-width: 600px) {
  .nav__inner { padding: 0 22px; }
  .footer { padding: 32px 0 36px; }
  .footer__inner { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .footer__nav { flex-wrap: wrap; justify-content: center; gap: 12px 18px; row-gap: 10px; }
}