/* trypta.health — THE shared site header.
   Single source of truth for every page's header except the homepage nav
   (which is the same spec extended with the menu; keep the two in sync).
   Values mirror index.html's nav exactly: 66px bar, 3rem gutter
   (1.5rem ≤900px, 1.2rem ≤600px), Cormorant 22px/400/0.16em in #1a2e1a,
   warm-gold dot, 38px bird with 11px gap. Edit here, changes everywhere. */
.site-header{position:sticky;top:0;z-index:100;background:rgba(250,247,242,0.95);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:0.5px solid rgba(90,122,90,0.18);padding:0 3rem;
  display:flex;align-items:center;justify-content:space-between;height:66px}
.site-header .brand{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;
  font-weight:400;letter-spacing:0.16em;color:#1a2e1a;text-transform:lowercase;
  text-decoration:none;line-height:1.7}
.site-header .brand span{color:#b8935a}
.site-header .brand img{height:38px;width:auto;vertical-align:middle;margin-right:11px}
.site-header .back{font-size:12px;font-weight:400;letter-spacing:0.08em;color:#6a6a5a;
  text-decoration:none;text-transform:uppercase;transition:color 0.2s}
.site-header .back:hover{color:#1a2e1a}
@media (max-width:900px){.site-header{padding:0 1.5rem}}
/* ≤600px: shrink the wordmark/bird so the bar breathes on phones —
   mirror any change here in index.html's nav ≤600px block */
@media (max-width:600px){.site-header{padding:0 1.2rem;height:58px}
  .site-header .brand{font-size:18px;letter-spacing:0.12em}
  .site-header .brand img{height:30px;margin-right:8px}
  .site-header .back{font-size:11px;letter-spacing:0.06em}}

/* visible keyboard focus — WCAG */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible{outline:2px solid #2d5a3d;outline-offset:2px}