/* Shared site header. Used by the home page, /resources/, and every blog page. */
header.site { position: sticky; top: 0; z-index: 30; background: rgba(255, 252, 247, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line, #EDE4D4); }
header.site nav { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; position: relative; }
header.site .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: "Inter Tight", "Inter", system-ui, sans-serif; font-weight: 900; font-size: 22px; letter-spacing: -0.03em; color: var(--ink, #14110C); white-space: nowrap; }
header.site .brand img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--orange, #F5A21B); }
header.site .brand .accent { color: var(--orange, #F5A21B); }
header.site ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
header.site li a { display: block; text-decoration: none; font-size: 15px; font-weight: 600; color: var(--ink-2, #4B443A); padding: 6px 0; border-bottom: 2px solid transparent; }
header.site li a:hover { color: var(--ink, #14110C); }
header.site li a.on { color: var(--ink, #14110C); border-bottom-color: var(--orange, #F5A21B); }
header.site .nav-actions { display: flex; align-items: center; gap: 10px; }

/* Hamburger: hidden on desktop */
.nav-toggle { display: none; width: 44px; height: 44px; border: 1.5px solid var(--line, #EDE4D4); border-radius: 12px; background: var(--card, #fff); cursor: pointer; padding: 0; position: relative; flex: none; }
.nav-toggle span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink, #14110C); border-radius: 2px; transition: transform .2s ease, opacity .2s ease, top .2s ease; }
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }
header.site.open .nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
header.site.open .nav-toggle span:nth-child(2) { opacity: 0; }
header.site.open .nav-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

@media (max-width: 960px) {
  header.site ul { gap: 16px; }
  header.site li a { font-size: 14px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  header.site nav { position: static; }
  header.site ul {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; padding: 8px 0 12px;
    background: var(--bg, #FFFCF7); border-bottom: 1px solid var(--line, #EDE4D4);
    box-shadow: 0 24px 40px -24px rgba(20, 17, 12, .35);
  }
  header.site.open ul { display: flex; }
  header.site li a { font-size: 18px; font-weight: 700; padding: 14px 24px; border-bottom: 1px solid var(--line, #EDE4D4); border-left: 3px solid transparent; }
  header.site li:last-child a { border-bottom: 0; }
  header.site li a.on { border-left-color: var(--orange, #F5A21B); border-bottom-color: var(--line, #EDE4D4); background: var(--bg-soft, #FFF4E1); }
  header.site .nav-actions .btn-yt { padding: 9px 14px; font-size: 14px; }
}

@media (max-width: 400px) {
  header.site .brand { font-size: 20px; }
  header.site .nav-actions .btn-yt span { display: none; }
  header.site .nav-actions .btn-yt { padding: 10px 12px; }
}

/* Anchored sections sit below the sticky header when linked to */
[id] { scroll-margin-top: 80px; }

@media (prefers-reduced-motion: reduce) { .nav-toggle span { transition: none; } }