/* ============================================================
   base.css  ·  shared page chrome
   ============================================================

   WHAT THIS FILE IS
   The parts that look the same on EVERY page: the html/body
   defaults, the top navigation bar, the light/dark toggle button,
   and the mobile hamburger menu. "Chrome" just means the frame
   around your content, not the content itself.

   Put a style here only if every page needs it. Anything specific
   to one page belongs in that page's own stylesheet instead
   (home.css, about.css, etc.).

   LOAD ORDER
   Link AFTER tokens.css (so the var(--color-...) names already
   exist) and BEFORE any page-specific stylesheet.
   ============================================================ */

/* ============================================================
   BASE
   ============================================================ */
html, body {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* ============================================================
   NAV
   ============================================================ */
.site-nav {
  background: var(--color-bg-nav);
  border-bottom: 0.5px solid var(--color-border-hairline);
  padding: 0 48px;
  height: 60px;
  display: flex;              /* lay children out in a row */
  align-items: center;        /* ...vertically centred */
  justify-content: space-between; /* logo left, links right */
  position: sticky;           /* nav stays pinned to the top... */
  top: 0;                     /* ...as the page scrolls under it */
  z-index: 100;               /* keep it above page content */
}

.nav-logo { font-family: 'Noto Serif SC', serif; font-weight: 300; font-size: 24px; color: var(--color-text-primary); text-decoration: none; letter-spacing: 0.01em; }

.nav-right { display: flex; align-items: center; gap: 8px; }

.nav-link {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-nav);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
}

.nav-link:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

.nav-divider {
  width: 0.5px;
  height: 20px;
  background: var(--color-border-hairline);
  margin: 0 4px;
}

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  transition: color 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.theme-toggle svg { display: block; stroke: currentColor; }


/* ============================================================
   ICON ANIMATION
   Was broken on all 5 live pages: the rule existed as a bare
   "icon-in { ... }" with no @keyframes prefix, so every
   "animation: icon-in" resolved to nothing. Fixed here once.
   ============================================================ */
@keyframes icon-in {
  from { opacity: 0; transform: rotate(20deg) scale(0.6); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}
.theme-toggle.animate i, .hamburger.animate i { animation: icon-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* ------------------------------------------------------------
   Hamburger + mobile fullscreen menu
   Shared chrome, so it lives here (it used to sit in
   case-study.css, but every page needs it, not just case studies).

   How the swap works: on wide screens the hamburger is hidden
   (display: none) and the normal nav links show. The @media block
   at the bottom flips that below 640px wide, hiding the desktop
   toggle and showing the hamburger + full-screen menu instead.
   ------------------------------------------------------------ */
.hamburger { display: none; align-items: center; justify-content: center; padding: 6px; border-radius: 6px; background: none; border: none; color: var(--color-text-muted); cursor: pointer; transition: color 0.2s ease, background 0.2s ease; }
.hamburger:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.hamburger svg { display: block; stroke: currentColor; }
.mobile-menu { display: none; }
.mobile-menu-link { font-family: 'Instrument Serif', serif; font-size: 40px; line-height: 1.15; letter-spacing: 0.01em; color: var(--color-text-primary); text-decoration: none; display: block; padding: 16px 32px; border-top: 0.5px solid var(--color-border-hairline); transition: color 0.2s ease; }
.mobile-menu-link:last-of-type { border-bottom: 0.5px solid var(--color-border-hairline); }
.mobile-menu-link:hover { color: var(--color-accent); }
.mobile-menu-link--soon { color: var(--color-text-muted); cursor: default; pointer-events: none; }
.mobile-menu-theme { position: absolute; bottom: 40px; left: 20px; background: none; border: 0.5px solid var(--color-border-hairline); border-radius: 6px; padding: 8px; cursor: pointer; color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; transition: color 0.2s ease, background 0.2s ease; }
.mobile-menu-theme:hover { color: var(--color-text-primary); background: var(--color-bg-hover); }
.mobile-menu-theme svg { display: block; stroke: currentColor; }
/* Below 640px wide (phones): hide the desktop toggle, show the
   hamburger, and turn the mobile menu into a full-screen overlay. */
@media (max-width: 640px) {
  .theme-toggle { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; flex-direction: column; justify-content: center; align-items: stretch; position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: var(--color-bg-page); z-index: 99; padding: 0 0 80px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
  .mobile-menu.open { opacity: 1; pointer-events: auto; }
}