@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Nunito:wght@600;700;800;900&display=swap");
/* Shared page header for every reader-facing page (2026-10-10, Dale: "the nav on the homepage and the other
   pages should be consistent"). It IS the homepage's floating pill: navy glass, rainbow ring + glow, logo with
   "My Book Hub" ("Hub" in gold), uppercase links with gold dots - plus a gold back pill on the left that always
   names where it goes (‹ Home / ‹ Book Store / ‹ Reading Guides), the same pill as the Book wall and Bookcase.
   Markup (built by /root/mbh-content/build_pages.py header(); static pages carry a copy):
   <header class="mbh-ph">
     <a class="mbh-ph-back" href="/app/store/"><svg ...></svg>Book Store</a>
     <a class="mbh-ph-brand" href="/"><img src="/assets/logo-icon-320.png" alt=""><span>My Book <em>Hub</em></span></a>
     <nav class="mbh-ph-links"><a>..</a><i></i><a>..</a>...</nav>
     <span class="mbh-ph-extra">(optional buttons)</span>
   </header> */
@property --mph-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
header.mbh-ph{position:sticky;top:10px;z-index:50;display:flex;align-items:center;gap:12px;
  width:min(1240px,calc(100% - 32px));min-height:62px;margin:12px auto 0;padding:8px 10px;border-radius:999px;
  background:rgba(10,25,64,.9)!important;border:1px solid transparent!important;
  box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-family:Nunito,system-ui,sans-serif}
header.mbh-ph::before,header.mbh-ph::after{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--mph-a),#ff5f6d,#ffb347,#ffe66d,#6ee7a8,#4fc3f7,#7c83fd,#d17cff,#ff5f6d);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:mphSpin 8s linear infinite}
header.mbh-ph::before{z-index:1;opacity:.9}
header.mbh-ph::after{z-index:-1;padding:5px;inset:-5px;filter:blur(10px);opacity:.7}
@keyframes mphSpin{to{--mph-a:360deg}}
@media (max-width:1023px),(pointer:coarse){header.mbh-ph::before,header.mbh-ph::after{animation:none}header.mbh-ph::after{filter:blur(7px);opacity:.55}}
@media (prefers-reduced-motion:reduce){header.mbh-ph::before,header.mbh-ph::after{animation:none}}
header.mbh-ph > *{position:relative;z-index:2}
header.mbh-ph a{text-decoration:none!important}
header.mbh-ph .mbh-ph-back{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 17px 0 12px;border-radius:999px;
  background:linear-gradient(135deg,#c9a84c,#e8c97a)!important;color:#1a1000!important;font:800 14px/1 Nunito,system-ui,sans-serif;
  box-shadow:0 2px 10px rgba(0,0,0,.3);white-space:nowrap;transition:transform .2s,box-shadow .2s}
header.mbh-ph .mbh-ph-back:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(201,168,76,.45)}
header.mbh-ph .mbh-ph-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
header.mbh-ph .mbh-ph-brand{display:inline-flex;align-items:center;gap:10px;min-width:0;color:#f0eef8!important}
header.mbh-ph .mbh-ph-brand img{width:44px;height:44px;border-radius:50%;border:2px solid rgba(232,201,122,.55);object-fit:cover;flex-shrink:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
header.mbh-ph .mbh-ph-brand:hover img{transform:rotate(-8deg) scale(1.06)}
header.mbh-ph .mbh-ph-brand span{font:400 18px/1 'Playfair Display',Georgia,serif;color:#f0eef8!important;white-space:nowrap}
header.mbh-ph .mbh-ph-brand em{font-style:normal;color:#c9a84c!important}
header.mbh-ph .mbh-ph-links{display:flex;align-items:center;gap:4px;margin:0 auto}
header.mbh-ph .mbh-ph-links i{width:4px;height:4px;border-radius:50%;background:#c9a84c;opacity:.75;flex-shrink:0}
header.mbh-ph .mbh-ph-links a{position:relative;padding:9px 11px;color:rgba(240,238,248,.85)!important;font:800 12.5px Nunito,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;transition:color .2s}
header.mbh-ph .mbh-ph-links a::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;border-radius:2px;background:#e8c97a;transform:scaleX(0);transition:transform .25s}
header.mbh-ph .mbh-ph-links a:hover,header.mbh-ph .mbh-ph-links a[aria-current]{color:#e8c97a!important}
header.mbh-ph .mbh-ph-links a:hover::after,header.mbh-ph .mbh-ph-links a[aria-current]::after{transform:scaleX(1)}
header.mbh-ph .mbh-ph-extra{display:inline-flex;gap:8px;margin-left:auto;padding-right:4px}
header.mbh-ph .mbh-ph-links + .mbh-ph-extra{margin-left:0}
header.mbh-ph .mbh-ph-extra .nbtn,header.mbh-ph .mbh-ph-extra a,header.mbh-ph .mbh-ph-extra button{height:40px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;
  border:1px solid rgba(232,201,122,.45)!important;background:rgba(255,255,255,.06)!important;color:#f0eef8!important;font:800 13px Nunito,system-ui,sans-serif;cursor:pointer}
@media(max-width:1180px){header.mbh-ph .mbh-ph-links{display:none}header.mbh-ph .mbh-ph-extra{margin-left:auto}}
@media(max-width:600px){header.mbh-ph{width:calc(100% - 20px);margin-top:8px;top:6px;min-height:56px;padding:6px 8px;gap:10px}
  header.mbh-ph .mbh-ph-back{height:40px;font-size:13.5px;padding:0 14px 0 10px}
  header.mbh-ph .mbh-ph-brand img{width:38px;height:38px}header.mbh-ph .mbh-ph-brand span{font-size:17px}}
@media(max-width:370px){header.mbh-ph .mbh-ph-brand span{display:none}}
/* older page styles give every <nav> a bar look - not inside the header pill */
header.mbh-ph nav.mbh-ph-links{position:static!important;height:auto!important;background:none!important;border:0!important;padding:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* phones: when the pill carries an extra button (My account / Sign out / account menu), keep just the logo */
@media(max-width:600px){header.mbh-ph:has(.mbh-ph-extra > :not([hidden]):not([style*="display:none"])) .mbh-ph-brand span,header.mbh-ph:has(> .mn-wrap) .mbh-ph-brand span,header.mbh-ph:has(> [class*="mn-"]) .mbh-ph-brand span{display:none}
  header.mbh-ph .mbh-ph-extra .nbtn,header.mbh-ph .mbh-ph-extra a,header.mbh-ph .mbh-ph-extra button{height:36px;padding:0 12px;font-size:12.5px}}
@media(max-width:1180px){header.mbh-ph .mbh-ph-links + .mbh-ph-extra{margin-left:auto}}