/* The browser pins the header; JS only observes crossing its original position. */
.site-header-anchor { height:1px; margin-top:24px; pointer-events:none; }
.app-header {
  --site-header-height:80px;
  position:sticky; top:0; z-index:40; isolation:isolate;
  height:var(--site-header-height); padding:0 20px; margin:0 0 24px;
  gap:24px; background:#1b1c1e; border:1px solid #343538; border-radius:12px;
  transition:border-color .22s ease,border-radius .22s ease,background-color .22s ease;
}
.app-header::before {
  content:''; position:fixed; inset:0 0 auto; height:var(--site-header-height);
  background:#1b1c1e; box-shadow:0 8px 24px #0003;
  opacity:0; z-index:-1; pointer-events:none; transition:opacity .22s ease;
}
.app-header.is-stuck { border-color:transparent; border-radius:0; }
.app-header.is-stuck::before { opacity:1; }
.app-header .wordmark { flex-shrink:0; white-space:nowrap; font-size:32px; }
.site-nav { display:none; align-items:center; gap:6px; margin-left:auto; }
.site-nav :is(button,a) {
  position:relative; min-height:44px; padding:0 13px; border-radius:6px;
  color:#bcbcbf; font:650 12px/1.2 system-ui,sans-serif;
  letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
  transition:color .18s ease,background-color .18s ease;
}
.site-nav :is(button,a)::after {
  content:''; position:absolute; bottom:0; left:13px; right:13px; height:2px;
  background:var(--accent); transform:scaleX(0); transition:transform .18s ease;
}
.site-nav :is(button,a).active { color:var(--text); }
.site-nav :is(button,a).active::after { transform:scaleX(1); }
.site-nav :is(button,a):hover { color:var(--text); background:#ffffff07; }
.site-nav :is(button,a):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.app-header>.icon-button { flex-shrink:0; width:40px; height:40px; margin-left:auto; }
html { scroll-padding-top:96px; }
@media(min-width:900px) {
  .site-nav { display:flex; }
  .app-header>.icon-button { margin-left:0; }
  .bottom-nav { display:none; }
  .app-shell { padding-bottom:48px; }
}
@media(max-width:899px) {
  .site-header-anchor { margin-top:14px; }
  .app-header { --site-header-height:64px; padding:0 14px; gap:14px; margin-bottom:20px; border-radius:10px; }
  .app-header .wordmark { font-size:29px; gap:7px; }
  .app-header>.icon-button { width:34px; height:34px; }
  html { scroll-padding-top:80px; }
}
@media(prefers-reduced-motion:reduce) {
  .app-header,.app-header::before,.site-nav :is(button,a),.site-nav :is(button,a)::after { transition:none; }
}

.app-header .wordmark .brand-name { color:var(--text); letter-spacing:-1.3px; }
.app-header .wordmark .brand-period { display:inline-block; width:.18em; height:.18em; margin-inline:.025em; overflow:hidden; color:var(--accent); background:currentColor; border-radius:0; text-indent:-100em; line-height:0; vertical-align:baseline; }
.app-header .wordmark .brand-club { color:var(--text); }
@media(max-width:359px) {
  .app-header .wordmark { font-size:24px; gap:6px; }
  .app-header .brand-flower svg { width:24px; height:24px; }
  .app-header { gap:10px; }
}