/* Top bar + footer icons, shared by every page (Oct 24, 2026).
   Wide screens (1000 px and up): the logo, 6 tabs, "More" and the Shop button on one line.
   Below 1000 px: the logo, a Menu button and the Shop button; the Menu opens every tab.
   The current page is bold (aria-current). Old .top/.tbar rules in each page are no longer used by the header. */
.rrbar{position:sticky;top:0;z-index:30;background:rgba(255,250,252,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid #f6dbe8;font-family:Jost,"Avenir Next","Segoe UI",system-ui,sans-serif}
.rrbar .rrin{max-width:1160px;margin:0 auto;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.rrbar .rrbrand{font:600 18px "Cormorant Garamond",Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:#2a1420;text-decoration:none;white-space:nowrap;flex:none}
.rrbar .rrbrand b{color:#d63384;font-weight:600}
.rrbar .rrnav{display:flex;align-items:center;gap:30px;font-size:14.5px}
.rrbar .rrnav a{color:#8a5a72;text-decoration:none;font-weight:500;white-space:nowrap}
.rrbar .rrnav a:hover{color:#2a1420}
.rrbar .rrnav a[aria-current]{color:#2a1420;font-weight:700}
.rrbar .rrshop{background:linear-gradient(180deg,#ff4d92,#f5287a);color:#fff!important;border-radius:99px;padding:6px 18px;font-weight:600!important;box-shadow:0 8px 18px -12px rgba(214,51,132,.8)}
.rrbar .rrshop[aria-current]{font-weight:700!important}
.rrmore{position:relative}
.rrmore>summary{list-style:none;cursor:pointer;color:#8a5a72;font-weight:500;white-space:nowrap;display:flex;align-items:center;gap:6px;user-select:none}
.rrmore>summary::-webkit-details-marker{display:none}
.rrmore>summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.rrmore[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.rrmore.has-current>summary{color:#2a1420;font-weight:700}
.rrmore .rrmenu-l{display:none}
.rrpanel{position:absolute;right:-12px;top:calc(100% + 14px);min-width:230px;background:#fff;border:1px solid #f6dbe8;border-radius:18px;padding:10px;display:grid;gap:2px;box-shadow:0 26px 50px -28px rgba(214,51,132,.6)}
.rrbar .rrpanel a{display:block;padding:10px 14px;border-radius:12px;color:#2a1420;font-size:15px}
.rrbar .rrpanel a small{display:block;color:#8a5a72;font-size:12.5px;font-weight:400}
.rrbar .rrpanel a:hover{background:#fff0f6}
.rrbar .rrpanel a[aria-current]{background:#fff0f6}
.rrpanel .rrm{display:none!important}
.rrpanel .rrsep{height:1px;background:#f6dbe8;margin:6px 10px}
.rrpanel .rrsep.rrm{display:none!important}
.rrbar a:focus-visible,.rrmore>summary:focus-visible{outline:2px solid #d63384;outline-offset:3px;border-radius:6px}

@media(max-width:999px){
  .rrbar .rrin{padding:10px 20px;gap:12px}
  .rrbar .rrnav{gap:14px}
  .rrbar .rrnav>.rrp{display:none}
  .rrmore{position:static}
  .rrmore>summary{border:1.5px solid #f6dbe8;border-radius:99px;padding:5px 14px;color:#2a1420;background:#fff}
  .rrmore .rrmore-l{display:none}.rrmore .rrmenu-l{display:inline}
  .rrmore.has-current>summary{font-weight:500}
  .rrpanel{left:16px;right:16px;top:calc(100% + 1px);min-width:0;max-width:480px;margin-left:auto;border-radius:0 0 20px 20px;border-top:0;padding:12px}
  .rrpanel .rrm{display:block!important}
  .rrpanel .rrsep.rrm{display:block!important}
}
@media(max-width:420px){
  .rrbar .rrin{padding:9px 14px;gap:8px}
  .rrbar .rrbrand{font-size:15px;letter-spacing:.11em}
  .rrbar .rrnav{gap:8px;font-size:13.5px}
  .rrmore>summary{padding:4px 11px}
  .rrbar .rrshop{padding:5px 13px}
  .rrpanel{left:10px;right:10px}
}
@media(max-width:340px){.rrbar .rrbrand{font-size:13.5px;letter-spacing:.08em}}

/* Footer: the accounts as icons (same accounts as the Links page) */
.rricons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:2px 0 4px;padding:0;list-style:none}
.rricons a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid #f6dbe8;background:#fff;color:#a81f63;text-decoration:none;transition:transform .2s,background .2s}
.rricons a:hover{background:#fff0f6;transform:translateY(-2px)}
.rricons svg{width:19px;height:19px;display:block}
.rrsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.rricons a{transition:none}}
/* index.html "Straight to the Point" / Classic look (Oct 30, her note): the top header keeps its light pink hue; the rest of the classic look lives in /look.js */
/* reset the pages' own details/summary/nav rules inside the top bar */
.rrbar details.rrmore{border:0;padding:0;margin:0;background:none}
.rrbar .rrmore>summary{justify-content:flex-start;font-size:inherit;margin:0}
.rrbar .rrnav{flex-wrap:nowrap;justify-content:flex-end;margin:0;padding:0}
/* Oct 24 (her phone-first ask): icons in the apps' real colours inside soft white circles; every tap target 44 px or more */
.rricons a{width:48px;height:48px;border-color:#f3dbe6;box-shadow:0 10px 22px -16px rgba(214,51,132,.55)}
.rricons svg{width:24px;height:24px}
.rrbar .rrmore>summary{min-height:44px;box-sizing:border-box}
.rrbar .rrshop{min-height:44px;display:inline-flex;align-items:center}
.rrbar .rrbrand{display:inline-block;line-height:44px}
@media(min-width:1000px){.rrbar .rrnav>a.rrp{min-height:44px;display:inline-flex;align-items:center}}
.rrbar .rrpanel a{min-height:48px}
footer .legal a,.sitelinks a{display:inline-block;padding:10px 3px}
#follow .rricons svg{width:24px;height:24px}

/* Oct 25, 2026 (round 2, her call): phones and half-width get a pink "Free Guide" button beside Shop.
   Wide screens already show "Free Guide" as a tab, so the button only shows below 1000 px. */
.rrbar .rrfree{display:none}
@media(max-width:999px){
  .rrbar .rrfree{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;background:#ffe3ef;color:#a81f63!important;border:1.5px solid #f6b9d3;border-radius:99px;padding:5px 15px;font-weight:600!important;white-space:nowrap}
  .rrbar .rrfree[aria-current]{font-weight:700!important;color:#2a1420!important}
}

/* Landing pages (Oct 25, 2026): <body class="landing"> hides the full menu and shows one button for that page's action
   (.rrland in the header). Take the class off and the page is a normal page again with the full top bar. */
.rrbar .rrland{display:none}
body.landing .rrbar .rrnav{display:none}
body.landing .rrbar .rrland{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;background:linear-gradient(180deg,#ff4d92,#f5287a);color:#fff;border-radius:99px;padding:6px 20px;font-weight:600;text-decoration:none;white-space:nowrap;box-shadow:0 8px 18px -12px rgba(214,51,132,.8)}
.landmore{text-align:center;margin:8px auto 0;padding:22px 16px 8px;max-width:620px}
.landmore a{display:inline-flex;align-items:center;min-height:44px;padding:8px 22px;border:1.5px solid #f6dbe8;border-radius:99px;background:#fff;color:#a81f63;font-weight:600;text-decoration:none}
.landmore a:hover{background:#fff0f6}
.landmore p{margin:0 0 10px;color:#8a5a72;font-size:14.5px}
/* Phones under 480 px (Oct 30 pm, her note: ONE line, not two): the logo, Menu, Free Guide and Shop all sit on one row.
   Smaller type + tighter pills make it fit from 320 px up; every button keeps its 44 px tap height. (Was a two-row bar; backup backups/site-pass-oct30-pm/site/nav.css) */
@media(max-width:479px){
  .rrbar .rrin{flex-wrap:nowrap;padding:0 10px;gap:6px}
  .rrbar .rrbrand{font-size:13.5px;letter-spacing:.07em;flex:0 1 auto;min-width:0}
  .rrbar .rrnav{flex:none;gap:4px;font-size:12.5px}
  .rrbar .rrmore>summary{padding:4px 9px;gap:4px}
  .rrbar .rrfree,.rrbar .rrshop{padding:5px 9px;justify-content:center}
  .rrpanel{top:100%}
}
@media(max-width:374px){
  .rrbar .rrin{padding:0 8px;gap:5px}
  .rrbar .rrbrand{font-size:12.5px;letter-spacing:.05em}
  .rrbar .rrnav{gap:3px;font-size:12px}
  .rrbar .rrmore>summary{padding:4px 7px}
  .rrbar .rrfree,.rrbar .rrshop{padding:5px 7px}
}
@media(max-width:340px){.rrbar .rrbrand{font-size:11px;letter-spacing:.03em}.rrbar .rrnav{font-size:11.5px}}
/* the one-line phone bar is ~45 px tall: in-page jumps (#shop, #quiz, …) stop below it */
@media(max-width:479px){body [id]{scroll-margin-top:64px!important}}
body.landing [id]{scroll-margin-top:84px!important}
.rrbar .rrland[hidden]{display:none!important}
@media(max-width:479px){
  body.landing .rrbar .rrin{flex-wrap:nowrap;padding:8px 14px}
  body.landing .rrbar .rrland{padding:6px 15px;font-size:14px}
}
@media(max-width:360px){body.landing .rrbar .rrin{padding:8px 10px;gap:6px}body.landing .rrbar .rrland{padding:6px 11px;font-size:13px}}

/* Oct 25, 2026 (round 3, her call): 5-item menu. Wide screens (1000 px and up): Start Here · Shop · Work With Me · Watch & Listen · About,
   a quiet "More" (Blog, FAQ, Links) and ONE coloured button: the pink "Free Guide". Shop is a tab there, so the Shop button hides.
   Below 1000 px nothing changes from round 2 (logo · Menu, Free Guide + Shop). Undo: delete this block and rerun navfix.py from the round 2 backup. */
@media(min-width:1000px){
  .rrbar .rrnav{gap:26px}
  .rrbar .rrshop{display:none}
  .rrbar .rrfree{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;background:linear-gradient(180deg,#ff4d92,#f5287a);color:#fff!important;border-radius:99px;padding:6px 20px;font-weight:600!important;white-space:nowrap;box-shadow:0 8px 18px -12px rgba(214,51,132,.8)}
  .rrbar .rrfree[aria-current]{font-weight:700!important}
}
@media(min-width:1000px) and (max-width:1120px){.rrbar .rrin{padding:12px 20px;gap:16px}.rrbar .rrnav{gap:18px}}
/* round 3: footer policy links reach the 44 px tap size on every page */
footer .legal a{min-height:44px;box-sizing:border-box;vertical-align:middle}