/* Baby Names tool — scoped styles ported from the design's helmet <style> block */
.bn-sans{ font-family:'Plus Jakarta Sans', sans-serif; }
.bn-serif{ font-family:'EB Garamond', Georgia, serif; }
#bn-root a{ color:#B0473C; text-decoration:none; }
#bn-root a:hover{ color:#97382E; }
#bn-root input, #bn-root button{ font-family:'Plus Jakarta Sans', sans-serif; }
#bn-root input:focus{ outline:none; border-color:#B0473C !important; }
#bn-root ::placeholder{ color:#b3aa9c; }
/* /baby-names sits on a light background (no dark hero), so the fixed site
   header must always use the solid, dark-text treatment — not the cream-on-
   hero default that only kicks in on scroll — and the page content must clear
   the fixed header. */
main#top{ padding-top:76px; }
.site-header:not(.scrolled){
  color:var(--color-text-primary);
  background:rgba(250,247,242,0.85);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 var(--color-border);
}

@keyframes bnFade{ from{opacity:0} to{opacity:1} }
@keyframes bnRise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
@keyframes bnTray{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none} }
@keyframes bnBarUp{ from{opacity:0; transform:translateY(120%)} to{opacity:1; transform:none} }
@keyframes bnSlideDown{ from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} }
@media print{
  .bn-noprint{ display:none !important; }
  body{ background:#FFFFFF !important; }
  #bn-sheet-wrap{ min-height:0 !important; background:#FFFFFF !important; padding:0 !important; }
  #bn-sheet-print{ box-shadow:none !important; border-radius:0 !important; max-width:100% !important; }
}