/* ─── LAYOUT ─── */

    .container {
      max-width: var(--content-default);
      margin-inline: auto;
      padding-inline: clamp(var(--space-4), 4vw, var(--space-8));
    }
    .container--wide { max-width: var(--content-wide); }

/* ─── NAVBAR ─── */

    .nav {
      position: sticky; top: 0; z-index: 100;
      background: oklch(from var(--color-bg) l c h / 0.88);
      backdrop-filter: blur(16px) saturate(1.4);
      -webkit-backdrop-filter: blur(16px) saturate(1.4);
      border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.08);
    }
    .nav__inner {
      display: flex; align-items: center; justify-content: space-between;
      height: 3.5rem; gap: var(--space-8);
    }
    .nav__logo {
      display: flex; align-items: center; gap: var(--space-3);
      text-decoration: none; color: var(--color-text); flex-shrink: 0;
    }
    .nav__logo svg { color: var(--color-primary); }
    .nav__logo-text {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      font-weight: 500;
      letter-spacing: -0.02em;
    }
    .nav__links {
      display: flex; align-items: center; gap: var(--space-1); list-style: none;
    }
    .nav__links a {
      font-size: var(--text-sm); color: var(--color-text-muted);
      text-decoration: none; padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-md);
    }
    .nav__links a:hover { color: var(--color-text); background: var(--color-surface-offset); }
    .nav__actions { display: flex; align-items: center; gap: var(--space-2); }
    .theme-toggle {
      width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
      border-radius: var(--radius-md); color: var(--color-text-muted);
    }
    .theme-toggle:hover { background: var(--color-surface-offset); color: var(--color-text); }
    .nav__hamburger {
      display: none; width: 36px; height: 36px; align-items: center; justify-content: center;
      border-radius: var(--radius-md); color: var(--color-text-muted);
    }
    .nav__hamburger:hover { background: var(--color-surface-offset); color: var(--color-text); }
    .nav__mobile {
      display: none; flex-direction: column; gap: var(--space-1);
      padding: var(--space-3) 0 var(--space-4);
      border-top: 1px solid var(--color-divider);
    }
    .nav__mobile.open { display: flex; }
    .nav__mobile a {
      font-size: var(--text-sm); color: var(--color-text-muted);
      text-decoration: none; padding: var(--space-3) var(--space-4);
      border-radius: var(--radius-md);
    }
    .nav__mobile a:hover { color: var(--color-text); background: var(--color-surface-offset); }

    @media (max-width: 680px) {
      .nav__links { display: none; }
      .nav__hamburger { display: flex; }
    }