/* Site navigation shared by every page: a plum top bar with the main tabs, and on phones
   a bottom tab bar, so a reader is never more than one tap from Home or from the app.
   Colours read the page's own tokens where they exist (the app has a dark theme) and fall
   back to the brand values on pages that do not define them. */

.sitenav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;min-height:72px}
.sitenav-logo{display:flex;align-items:center;gap:9px;flex:none;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:1.38rem;letter-spacing:-.035em;color:#FAF1E4;text-decoration:none;min-height:44px}
.sitenav-logo .dot{width:11px;height:11px;border-radius:50%;background:#E9A227;flex:none}
.sitenav-links{display:flex;align-items:center;gap:4px;margin-inline-start:auto;font-family:'Bricolage Grotesque',system-ui,sans-serif}
.sitenav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;color:rgba(250,241,228,.8);font-size:.9rem;font-weight:500;text-decoration:none;white-space:nowrap;transition:color .16s ease,background .16s ease}
.sitenav-links a:hover{color:#FAF1E4;background:rgba(250,241,228,.08)}
.sitenav-links a[aria-current="page"]{color:#FAF1E4;font-weight:700}
.sitenav-links a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:#E9A227}
.sitenav-links a.sitenav-cta{margin-inline-start:8px;padding:0 18px;background:#E9A227;color:#2B1428;font-weight:700}
.sitenav-links a.sitenav-cta:hover{background:#F2B342;color:#2B1428}
.sitenav-links a.sitenav-cta[aria-current="page"]{box-shadow:0 0 0 2px rgba(250,241,228,.9)}
.sitenav-links a.sitenav-cta[aria-current="page"]::after{display:none}
.sitenav-end{display:flex;align-items:center;gap:8px;flex:none}
.sitenav-end:empty{display:none}
.sitenav :focus-visible,.tabbar :focus-visible{outline:2.5px solid #E9A227;outline-offset:2px}

/* pages without their own plum header (about, FAQ, legal, 404) get this bar */
.sitehead{background:#3E1F3A;color:#FAF1E4}
.sitehead-in{width:min(1040px,calc(100% - 44px));margin:0 auto}

/* bottom tab bar: phones only */
.tabbar{display:none}
@media(max-width:1080px){.sitenav-links a.wide-only{display:none}}
@media(max-width:860px){
  .sitenav-links{display:none}
  .sitenav{min-height:64px;padding:10px 0}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--surface,#FFFFFF);border-top:1px solid var(--line,#DCE3E6);box-shadow:0 -6px 24px rgba(20,33,42,.08);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;border-radius:12px;color:var(--ink-faint,#626F79);font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.01em;text-decoration:none;-webkit-tap-highlight-color:transparent}
  .tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabbar a[aria-current="page"]{color:var(--plum,#3E1F3A);background:var(--plum-soft,#F1EAF0)}
  .tabbar a.tab-main svg{width:24px;height:24px}
  body.has-tabbar{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
}
/* the full wordmark is long; keep it and the page controls on one line on small phones */
@media(max-width:480px){.sitenav{gap:10px}.sitenav-logo{font-size:1.14rem;gap:7px}.sitenav-logo .dot{width:9px;height:9px}}
@media(max-width:350px){.sitenav-logo{font-size:1.02rem}}
@media print{.sitenav,.sitehead,.tabbar{display:none!important}body.has-tabbar{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){.sitenav-links a{transition:none}}