/* ==========================================================================
   Chrome
   The shared header (sticky nav) and footer. One menu bar and one footer
   across the homepage, the Field Notes index and the articles.
   ========================================================================== */

/* ---------- Sticky navigation ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(244,241,234,0.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .35s ease, background .35s ease;
}
.site-nav.scrolled { border-bottom-color: var(--line); background: rgba(244,241,234,0.9); }
.site-nav .wrap { max-width: none !important; display: flex; justify-content: space-between; align-items: center; padding-block: 26px; transition: padding .35s ease; }
.site-nav.scrolled .wrap { padding-block: 15px; }

.logo { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo-mark { width: 24px; height: 24px; }

.nav-right { display: flex; gap: 30px; align-items: center; font-size: 15px; }
.nav-right a { color: var(--ink-soft); text-decoration: none; position: relative; }
.nav-right a:not(.btn):hover { color: var(--ink); }
.nav-right a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: -5px; height: 1px; width: 0;
  background: var(--thread); transition: width .3s ease;
}
.nav-right a:not(.btn):hover::after, .nav-right a.active::after { width: 100%; }
.nav-right a.active { color: var(--ink); }
@media (max-width: 620px) { .nav-right a:not(.btn) { display: none; } }

/* ---------- Buttons ---------- */
.btn { display: inline-block; background: var(--ink); color: var(--paper); padding: 13px 22px; text-decoration: none; font-size: 15px; font-weight: 500; border-radius: 2px; transition: background .15s ease, transform .15s ease, color .15s ease; white-space: nowrap; }
.btn:hover { background: var(--thread); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* ---------- Footer ---------- */
footer { padding: 48px 0; background: var(--ink); color: #6f6c66; font-size: 14px; border-top: 1px solid #2a2926; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
footer a { color: #6f6c66; text-decoration: none; margin-left: 24px; }
footer a:hover { color: var(--paper); }
footer .foot-brand { display: flex; flex-direction: column; gap: 6px; }
footer .foot-logo { color: var(--paper); font-family: 'Fraunces', serif; font-size: 18px; }
footer .foot-copy { color: #6f6c66; font-size: 13px; }
footer .foot-links { display: flex; align-items: center; flex-wrap: wrap; }