/* Shared inner-page navigation. Homepage navigation remains part of the hero. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body:not(.home-page) .site-header{position:relative;z-index:50;background:#fffaf1;border-bottom:1px solid rgba(84,55,99,.10);box-shadow:0 5px 18px rgba(58,38,69,.07)}
body:not(.home-page) .site-header .nav-wrap{width:min(100% - 32px,1240px);max-width:1240px;margin:0 auto;padding:9px 0;display:flex;align-items:center;justify-content:space-between;gap:22px}
body:not(.home-page) .site-header .logo{flex:0 0 auto}
body:not(.home-page) .site-header .logo .brand-logo-image{width:210px;max-height:104px;object-fit:contain}
body:not(.home-page) .main-nav ul{display:flex;align-items:center;gap:9px;margin:0;padding:0;list-style:none}
body:not(.home-page) .main-nav a{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:9px 15px;border:1px solid rgba(73,48,91,.08);border-radius:999px;color:#503060;font-weight:800;line-height:1;text-decoration:none;white-space:nowrap;box-shadow:0 4px 10px rgba(65,42,78,.08);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
body:not(.home-page) .main-nav a::before{font-size:1rem;line-height:1}
body:not(.home-page) .main-nav .nav-ollie{background:#ffd8d2;color:#9d2e2b}
body:not(.home-page) .main-nav .nav-ollie::before{content:"●";color:#2478df}
body:not(.home-page) .main-nav .nav-family{background:#e6d5ff;color:#7141a2}
body:not(.home-page) .main-nav .nav-family::before{content:"◆"}
body:not(.home-page) .main-nav .nav-residents{background:#ccefee;color:#166b70}
body:not(.home-page) .main-nav .nav-residents::before{content:"❧"}
body:not(.home-page) .main-nav .nav-creatures{background:#cfddff;color:#284f9c}
body:not(.home-page) .main-nav .nav-creatures::before{content:"●"}
body:not(.home-page) .main-nav .nav-things{background:#ffe5a8;color:#955312}
body:not(.home-page) .main-nav .nav-things::before{content:"★"}
body:not(.home-page) .main-nav a:hover,body:not(.home-page) .main-nav a:focus-visible{transform:translateY(-2px);filter:saturate(1.06);box-shadow:0 7px 15px rgba(65,42,78,.13)}
body:not(.home-page) .main-nav a[aria-current="page"]{outline:3px solid rgba(88,54,112,.22);outline-offset:2px}
@media(max-width:1000px){body:not(.home-page) .site-header .logo .brand-logo-image{width:175px}body:not(.home-page) .main-nav a{padding:9px 11px;font-size:.88rem}}
@media(max-width:760px){body:not(.home-page) .site-header .nav-wrap{width:100%;padding:7px 16px;flex-wrap:wrap}body:not(.home-page) .site-header .logo .brand-logo-image{width:160px;max-height:80px}body:not(.home-page) .nav-toggle{display:block;margin-left:auto}body:not(.home-page) .main-nav{flex-basis:100%;width:100%}body:not(.home-page) .main-nav ul{display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:10px 0 7px}body:not(.home-page) .main-nav a{display:flex;width:100%;min-height:44px}}
@media(prefers-reduced-motion:reduce){body:not(.home-page) .main-nav a{transition:none}}

/* Current six-character family lineup. */
.family-page .hero-art .family-hero-lineup{position:relative;z-index:2;width:min(690px,118%);height:430px;margin-left:-9%;display:flex;align-items:flex-end;justify-content:center;gap:0}
.family-page .hero-art .family-hero-lineup img{position:relative;width:18.5%;height:100%;max-height:none;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 14px 16px rgba(67,43,78,.14));transform:none}
.family-page .hero-art .family-hero-lineup img:nth-child(1),.family-page .hero-art .family-hero-lineup img:nth-child(2){width:23%;z-index:1}
.family-page .hero-art .family-hero-lineup img:nth-child(3),.family-page .hero-art .family-hero-lineup img:nth-child(4),.family-page .hero-art .family-hero-lineup img:nth-child(5){z-index:3;margin-left:-4%}
.family-page .hero-art .family-hero-lineup img:nth-child(6){width:20%;z-index:2;margin-left:-3%}
@media(max-width:900px){.family-page .hero-art .family-hero-lineup{width:100%;height:330px;margin-left:0}.family-page .hero-art .family-hero-lineup img{width:18%}.family-page .hero-art .family-hero-lineup img:nth-child(1),.family-page .hero-art .family-hero-lineup img:nth-child(2){width:22%}}
