/* A New Page, the age switcher bar (tire-kick Oct 14, P0-4). Pairs with /js/anp-age-switch.js.
   Phone (up to 767px): a 44px bar that sticks under the 64px header (the header sticks too on these pages), cream at
   92% with a blur, "<- Home" at the left and the pill (36px, inside a 44px tap area) at the right.
   Computer: the same bar is not sticky; the breadcrumb "Home > Ages 11 to 18" sits at the left, the pill at the right.
   Fallback values keep it right on a page without the homepage tokens. Reduced motion: no transitions. */
.anp-age-switch{position:relative;z-index:45;background:color-mix(in srgb,var(--anp-cream,#FBF8F1) 92%,transparent);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid rgba(31,46,85,.10);font-family:var(--font-sans,"Lexend",system-ui,sans-serif);color:var(--anp-ink,#1F2E55)}
.anp-age-switch .as-row{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1160px;min-height:44px;margin:0 auto;padding:0 16px}
.anp-age-switch a{color:var(--anp-ink,#1F2E55)}
.anp-age-switch .as-home{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font:600 15px/1.2 var(--font-sans,"Lexend",system-ui,sans-serif);text-decoration:none;white-space:nowrap}
.anp-age-switch .as-home:hover{text-decoration:underline;text-underline-offset:3px}
.anp-age-switch .as-arrow{font-size:16px}
.anp-age-switch .as-crumb{display:none;list-style:none;margin:0;padding:0;align-items:center;gap:0;font:500 15px/1.3 var(--font-sans,"Lexend",system-ui,sans-serif);min-width:0}
.anp-age-switch .as-crumb li{display:inline-flex;align-items:center;min-width:0}
.anp-age-switch .as-crumb li + li::before{content:"\203A";margin:0 10px;color:rgba(31,46,85,.6)}
.anp-age-switch .as-crumb a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px;color:var(--anp-ink,#1F2E55)}
.anp-age-switch .as-crumb [aria-current]{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the pill: a 44px tap area around a 36px face */
.anp-age-switch .as-pill{display:inline-flex;align-items:center;min-height:44px;padding:0;margin:0;border:0;background:none;cursor:pointer;color:inherit;font:inherit;flex:none}
.anp-age-switch .as-face{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 12px;border-radius:999px;background:var(--anp-milk,#FFFDF8);border:1.5px solid rgba(31,46,85,.22);font:600 15px/1 var(--font-sans,"Lexend",system-ui,sans-serif);white-space:nowrap;box-shadow:0 1px 2px rgba(31,46,85,.06)}
.anp-age-switch .as-pill:hover .as-face{border-color:var(--anp-gold-edge,#D99A2B)}
.anp-age-switch .as-pill:focus-visible{outline:none}
.anp-age-switch .as-pill:focus-visible .as-face{outline:3px solid var(--anp-ink,#1F2E55);outline-offset:2px}
.anp-age-switch .as-dot{width:10px;height:10px;border-radius:50%;background:var(--w-accent,var(--anp-gold,#F2B544));box-shadow:0 0 0 2px rgba(242,181,68,.28);flex:none}
.anp-age-switch[data-page="littles"] .as-dot{background:#FF9F43;box-shadow:0 0 0 2px rgba(255,159,67,.28)}
.anp-age-switch .as-chev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s ease}
.anp-age-switch .as-pill[aria-expanded="true"] .as-chev{transform:rotate(180deg)}
/* the sheet: three ages with their door art, then All worlds */
.anp-age-switch .as-sheet{position:absolute;top:100%;left:12px;right:12px;margin-top:4px;padding:8px;display:flex;flex-direction:column;gap:2px;background:var(--anp-milk,#FFFDF8);border:1px solid rgba(31,46,85,.12);border-radius:18px;box-shadow:0 18px 44px rgba(31,46,85,.20)}
.anp-age-switch .as-sheet[hidden]{display:none}
.anp-age-switch .as-opt{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:12px;text-decoration:none}
.anp-age-switch .as-opt:hover{background:var(--anp-paper,#F4ECDC)}
.anp-age-switch .as-opt img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--anp-milk,#FFFDF8),0 0 0 3px rgba(31,46,85,.12)}
.anp-age-switch .as-t{display:flex;flex-direction:column;min-width:0}
.anp-age-switch .as-t b{font:600 17px/1.25 var(--font-serif,"Fraunces",Georgia,serif)}
.anp-age-switch .as-s{font-size:14px;line-height:1.35;color:var(--anp-text-muted-solid,#4B5674)}
.anp-age-switch .as-opt[aria-current="page"]{background:var(--anp-paper,#F4ECDC);box-shadow:inset 3px 0 0 var(--anp-gold,#F2B544)}
.anp-age-switch .as-all{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:4px;border-top:1px solid rgba(31,46,85,.10);font:600 15px/1.2 var(--font-sans,"Lexend",system-ui,sans-serif);text-decoration:underline;text-underline-offset:3px}
.anp-age-switch a:focus-visible{outline:3px solid var(--anp-ink,#1F2E55);outline-offset:2px;border-radius:8px}
/* phone: the header and the bar stay at hand while the page scrolls */
@media (max-width:767px){
  body.has-age-switch header.anp-home-nav{position:sticky;top:0;z-index:50}
  .anp-age-switch{position:sticky;top:64px}
}
/* computer: the breadcrumb replaces "<- Home"; the sheet drops from the pill */
@media (min-width:768px){
  .anp-age-switch .as-row{padding:0 24px}
  .anp-age-switch .as-home{display:none}
  .anp-age-switch .as-crumb{display:flex}
  .anp-age-switch .as-sheet{left:auto;right:24px;width:340px}
}
@media (min-width:861px){.anp-age-switch{position:relative;top:auto}}
@media (prefers-reduced-motion:reduce){.anp-age-switch .as-chev{transition:none}}
@media print{.anp-age-switch{display:none}}