/* ============================================================
   SITE HEADER — ONE implementation, all seven pages.

   Replaces three headers that had drifted apart:
     index    66px, transparent until scrolled, grass texture, 17.85px logo
     library  66px, transparent always (its is-stuck handler was never
              called, so the backing never faded in), 25.5px logo
     detail   56px, opaque, 22px logo
   The detail-page header won. The other two now match it.

   SELF-CONTAINED ON PURPOSE. It declares its own palette rather than
   reading --rail/--line: those are declared in each detail page's own
   <style>, NOT in css/detail.css. index/library never declared them, so
   a shared header depending on them would render transparent there.

   Desktop   : 56px bar, #fafbfc, horizontal lockup at 22px
   <= 720px  : white bar, stacked lockup at 36px
   ============================================================ */

.site-header,
.dp-header {
  --hdr-h:    56px;
  --hdr-bg:   #fafbfc;
  --hdr-line: #e6e9ee;
  --hdr-logo: 22px;

  flex: none;
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 20px;
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--hdr-line);
}

/* index/library scroll; the detail pages are a fixed flex column and don't */
.site-header { position: sticky; top: 0; z-index: 50; }

.site-header .logo-link,
.dp-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.site-header .logo-link img,
.dp-logo img {
  height: var(--hdr-logo);
  width: auto;
  max-width: none;
  display: block;
}

/* Mobile: white bar + the stacked lockup.
   36px, not 22px — the stacked lockup is a two-line mark, and at 22px its
   wordmark stops being legible. 36px is the size index already used for it,
   and it clears the 56px bar with 10px of air top and bottom. */
@media (max-width: 720px) {
  .site-header,
  .dp-header {
    --hdr-bg:   #ffffff;
    --hdr-logo: 36px;
  }
}