/* Tiny Baby Names brand layer: logo, wordmark colours, soft sky background, banner, footer badge.
   Loaded last on every page. Colours come from the logo: blue, pink and teal. */
:root{--br-blue:#2B86D6;--br-pink:#E64B7B;--br-teal:#0E9C90;--ptop:#E8F5FE}
:root[data-theme="dark"]{--br-blue:#6DB6F5;--br-pink:#FF7FA3;--br-teal:#3CCDBF;--ptop:#111830}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--br-blue:#6DB6F5;--br-pink:#FF7FA3;--br-teal:#3CCDBF;--ptop:#111830}}

/* soft sky at the top of every page */
body{background:linear-gradient(180deg,var(--ptop) 0,var(--paper) 520px) no-repeat,var(--paper)}

/* header: round baby-face mark and two-colour wordmark */
.logo i{width:42px;height:42px;border-radius:50%;background:url(../images/logo-face.gif) center/cover no-repeat,#fff;transform:none;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--br-blue),0 6px 14px -6px rgba(43,134,214,.55);flex:none}
.logo i:after,.logo i:before{display:none}
.logo{font-family:var(--fd);font-weight:600}
.logo span{color:var(--br-blue)}
.logo b,:root[data-accent] .logo b{color:var(--br-pink)}
.wrap>nav{border-bottom:1.5px solid color-mix(in srgb,var(--br-blue) 14%,transparent)}
@media (max-width:420px){.logo{font-size:24px;gap:8px}.logo i{width:36px;height:36px}}

/* welcome banner on the homepage */
.bn{margin:6px 0 4px;border-radius:30px;overflow:hidden;box-shadow:0 16px 36px -18px rgba(43,134,214,.45),0 0 0 1.5px color-mix(in srgb,var(--br-blue) 18%,transparent);background:#E4F4FD;line-height:0}
.bn img{display:block;width:100%;height:auto;aspect-ratio:8/3}
@media (min-width:760px){.bn img{aspect-ratio:3/1;object-fit:cover;object-position:50% 46%}}
:root[data-theme="dark"] .bn{box-shadow:0 16px 36px -18px rgba(0,0,0,.6),0 0 0 1.5px rgba(255,255,255,.12)}

/* friendlier cards, chips and headings */
.card,.ent,.bc-card,.pn-c{border-radius:24px}
.card:hover,.ent:hover{border-color:color-mix(in srgb,var(--br-blue) 45%,var(--line))}
.eyebrow{background:color-mix(in srgb,var(--br-blue) 14%,transparent);color:#1B5FA6}
:root[data-theme="dark"] .eyebrow{color:var(--br-blue)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .eyebrow{color:var(--br-blue)}}
.pg h2:not(.bc-h2):before,.art h2:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--br-blue),var(--br-pink));margin-right:10px;vertical-align:.12em}
.crumbs a{color:var(--br-blue)}
a{text-underline-offset:3px}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:var(--br-blue)}
.chips a:hover,.chip:hover{border-color:var(--br-blue)}

/* footer badge */
footer:before{content:"";display:block;width:96px;height:96px;margin:0 auto 14px;border-radius:26px;background:#fff url(../images/logo-badge.gif) center/contain no-repeat;box-shadow:0 10px 24px -12px rgba(43,134,214,.6),0 0 0 1.5px color-mix(in srgb,var(--br-blue) 22%,transparent)}
footer{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--br-blue) 7%,transparent))}

/* about page badge */
.ab-logo{display:block;width:min(170px,46vw);height:auto;margin:6px 0 12px;border-radius:30px;box-shadow:0 14px 30px -16px rgba(43,134,214,.55),0 0 0 1.5px color-mix(in srgb,var(--br-blue) 20%,transparent)}
@media print{.bn,footer:before{display:none}}
@media (prefers-reduced-motion:no-preference){
 @keyframes br-in{from{opacity:0;transform:translateY(14px) scale(.985)}}
 @keyframes br-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
 .bn{animation:br-in .8s cubic-bezier(.2,.7,.2,1) both}
 .logo i{animation:br-float 4.5s ease-in-out infinite}
 .logo:hover i{animation:dl-wiggle .6s ease}
 footer:before{transition:transform .4s cubic-bezier(.3,1.5,.5,1)}footer:hover:before{transform:rotate(-4deg) scale(1.05)}
}
html.calm .bn,html.calm .logo i{animation:none!important}

@media (min-width:720px){.ab-logo{float:right;margin:6px 0 16px 24px}}