/* Shared tokens and components for the static name / category pages */
:root{--paper:#FBF6EE;--card:#FFFFFF;--ink:#1F2A44;--mut:#667191;--line:#EADFCF;--coral:#F26B5B;--coral-d:#D5513F;--navy:#1F2A44;--fin:#1F2A44;--fin-ink:#FFFFFF;--ibg:#FFFFFF;--iink:#1F2A44;--sc1:#CFE5FA;--sc2:#FDE4D2;--cloud:#FFFFFF;--girl:#E04A78;--boy:#2F7FD8;--uni:#14937F;--pg:#FFDDE6;--pb:#D6E8FD;--pu:#D2F1E7;--pk:#FFE9A8;--shadow:0 14px 34px rgba(31,42,68,.10);--fd:Fredoka,"Trebuchet MS",system-ui,sans-serif;--fb:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#111830;--card:#1A2442;--ink:#F4EFE6;--mut:#A6B1CE;--line:#2B3759;--fin:#26315C;--ibg:#10172E;--iink:#F4EFE6;--sc1:#22386B;--sc2:#4A3470;--cloud:#394775;--shadow:0 14px 34px rgba(0,0,0,.35);--pg:#5B3047;--pb:#25406B;--pu:#1D4B47;--pk:#5B4B22;--coral:#FF8070;--girl:#FF7AA2;--boy:#6AAEFF;--uni:#3ED1B7;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#111830;--card:#1A2442;--ink:#F4EFE6;--mut:#A6B1CE;--line:#2B3759;--fin:#26315C;--ibg:#10172E;--iink:#F4EFE6;--sc1:#22386B;--sc2:#4A3470;--cloud:#394775;--shadow:0 14px 34px rgba(0,0,0,.35);--pg:#5B3047;--pb:#25406B;--pu:#1D4B47;--pk:#5B4B22;--coral:#FF8070;--girl:#FF7AA2;--boy:#6AAEFF;--uni:#3ED1B7;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--fb);padding-inline:max(16px,env(safe-area-inset-left,0px))}
.wrap{max-width:1140px;margin:0 auto}
h1,h2,h3,.logo{font-family:var(--fd);font-weight:600;text-wrap:balance;margin:0}
.wrap>nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;justify-content:space-between;align-items:center;padding:14px 0;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px)}
.logo{font-size:28px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.logo i{width:34px;height:34px;border-radius:50% 50% 50% 8px;background:var(--coral);display:inline-block;position:relative;transform:rotate(-8deg)}
.logo i:after{content:"";position:absolute;left:9px;top:11px;width:16px;height:9px;border-bottom:3px solid #fff;border-radius:0 0 12px 12px}
.logo b{color:var(--coral);font-weight:600}
.tb{display:flex;gap:8px}
.btn{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:9px 18px;font:700 14px var(--fb);cursor:pointer;transition:.2s}
.btn:hover{border-color:var(--coral);transform:translateY(-1px)}
.btn:focus-visible,.chip:focus-visible,.kid:focus-visible,input:focus-visible,select:focus-visible,.heart:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.tag{display:inline-block;font:800 11.5px var(--fb);padding:3px 10px;border-radius:99px;margin:0 4px 4px 0;background:color-mix(in srgb,var(--mut) 16%,transparent);color:var(--ink)}
.tag.g{background:var(--girl);color:#fff}.tag.b{background:var(--boy);color:#fff}.tag.u{background:var(--uni);color:#fff}
:root[data-theme="dark"] .tag.g,:root[data-theme="dark"] .tag.b,:root[data-theme="dark"] .tag.u{color:#111830}
footer{border-top:1.5px solid var(--line);color:var(--mut);font-size:13.5px;padding:26px 0 44px;text-align:center}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:10px 16px;border-radius:12px;font-weight:800;text-decoration:none}
.skip:focus{top:10px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a{color:inherit}
.logo{text-decoration:none}
.logo b{color:#B63A28}
:root[data-theme="dark"] .logo b{color:var(--coral)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo b{color:var(--coral)}}
nav a.btn{text-decoration:none;display:inline-flex;align-items:center}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.crumbs{font-size:13.5px;font-weight:700;color:var(--mut);margin:18px 0 6px}
.crumbs a{color:var(--mut)}
.crumbs span[aria-current]{color:var(--ink)}
.pg h1{font-size:clamp(34px,5vw,54px);line-height:1.06;letter-spacing:-.02em;margin:6px 0 10px}
.pg .lead{font-size:18px;color:var(--mut);max-width:40em;margin:8px 0 20px}
.pg h2{font-size:clamp(22px,2.8vw,28px);margin:34px 0 12px}
.pg h3{font:600 20px var(--fd);margin:0}
.note{font-size:14px;color:var(--mut);background:color-mix(in srgb,var(--card) 80%,transparent);border:1.5px dashed var(--line);border-radius:18px;padding:12px 16px;margin:18px 0;max-width:46em}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 6px}
.cta .btn{text-decoration:none;display:inline-flex;align-items:center}
.btn.pri{background:#BA3C2A;border-color:#BA3C2A;color:#fff}
:root[data-theme="dark"] .btn.pri{color:#111830;background:var(--coral);border-color:var(--coral)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.pri{color:#111830;background:var(--coral);border-color:var(--coral)}}
.entries{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:12px 0 0}
.ent{background:var(--card);border:1.5px solid var(--line);border-radius:22px;padding:16px 18px}
.ent .mn{color:var(--ink);font-size:17px;margin:6px 0 10px}
.tag{display:inline-block;font:800 11.5px var(--fb);padding:3px 10px;border-radius:99px;margin:0 4px 4px 0;background:color-mix(in srgb,var(--mut) 16%,transparent);color:var(--ink)}
.tag.g{background:var(--girl);color:#fff}.tag.b{background:var(--boy);color:#fff}.tag.u{background:var(--uni);color:#fff}
:root[data-theme="dark"] .tag.g,:root[data-theme="dark"] .tag.b,:root[data-theme="dark"] .tag.u{color:#111830}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tag.g,:root:not([data-theme="light"]) .tag.b,:root:not([data-theme="light"]) .tag.u{color:#111830}}
.av2{display:inline-grid;place-items:center;width:62px;height:70px;border-radius:999px 999px 14px 14px;font:600 30px var(--fd);box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.7);margin:0 14px 0 0;vertical-align:middle;background-size:cover;background-position:center}
.hd{display:flex;align-items:center;gap:6px;margin:6px 0 12px}
.hd h1{margin:0}
.az{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0;padding:0;list-style:none}
.az a{display:inline-block;min-width:34px;text-align:center;padding:5px 9px;border:1.5px solid var(--line);border-radius:99px;font-weight:800;font-size:13.5px;text-decoration:none;background:var(--card)}
.az a:hover{border-color:var(--coral)}
.nl{list-style:none;margin:0;padding:0;columns:3 280px;column-gap:26px}
.nl li{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--line);font-size:15px}
.nl a{font-weight:800;text-decoration:none;color:var(--ink)}
.nl a:hover{color:var(--coral-d);text-decoration:underline}
.nl .m{color:var(--mut)}
.chips{display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;margin:0;padding:0}
.chips a{display:inline-block;border:1.5px solid var(--line);border-radius:99px;padding:5px 14px;font-weight:700;font-size:13.5px;text-decoration:none;background:var(--card)}
.chips a:hover{border-color:var(--coral)}
.grp{margin:26px 0 0;scroll-margin-top:90px}
.grp h2{margin:0 0 6px;font-size:26px}
.say{margin-left:6px}
.pg footer{margin-top:44px}
.pg footer a{color:var(--mut)}
.ft-l{margin-top:10px;display:flex;gap:6px 16px;justify-content:center;flex-wrap:wrap}
.hub-sec{margin:0 0 6px}
.cnt{color:var(--mut);font-weight:700;font-size:15px}

.av2.g{background:var(--pg);color:var(--girl)}.av2.b{background:var(--pb);color:var(--boy)}.av2.u{background:var(--pu);color:var(--uni)}
.tag.g{background:#BE2D5C}.tag.b{background:#1D62B3}.tag.u{background:#0E7565}

/* ===== v4 accents (chosen by the site owner in /admin/) ===== */
:root[data-accent=ocean]{--coral:#1B5FA6;--coral-d:#1B5FA6}
:root[data-accent=ocean] .btn.pri,:root[data-accent=ocean] .cmpbar #cmpgo{background:#1B5FA6;border-color:#1B5FA6;color:#fff}
:root[data-accent=ocean] .logo b{color:#1B5FA6}
:root[data-accent=ocean][data-theme=dark]{--coral:#7DB8FF;--coral-d:#7DB8FF}
:root[data-accent=ocean][data-theme=dark] .btn.go,:root[data-accent=ocean][data-theme=dark] .btn.pri,:root[data-accent=ocean][data-theme=dark] .cmpbar #cmpgo{background:#7DB8FF;border-color:#7DB8FF;color:#111830}
:root[data-accent=ocean][data-theme=dark] .logo b{color:#7DB8FF}
@media (prefers-color-scheme:dark){:root[data-accent=ocean]:not([data-theme=light]){--coral:#7DB8FF;--coral-d:#7DB8FF}:root[data-accent=ocean]:not([data-theme=light]) .btn.go,:root[data-accent=ocean]:not([data-theme=light]) .btn.pri,:root[data-accent=ocean]:not([data-theme=light]) .cmpbar #cmpgo{background:#7DB8FF;border-color:#7DB8FF;color:#111830}:root[data-accent=ocean]:not([data-theme=light]) .logo b{color:#7DB8FF}}
:root[data-accent=forest]{--coral:#1E7A4C;--coral-d:#1E7A4C}
:root[data-accent=forest] .btn.pri,:root[data-accent=forest] .cmpbar #cmpgo{background:#1E7A4C;border-color:#1E7A4C;color:#fff}
:root[data-accent=forest] .logo b{color:#1E7A4C}
:root[data-accent=forest][data-theme=dark]{--coral:#5FD3A0;--coral-d:#5FD3A0}
:root[data-accent=forest][data-theme=dark] .btn.go,:root[data-accent=forest][data-theme=dark] .btn.pri,:root[data-accent=forest][data-theme=dark] .cmpbar #cmpgo{background:#5FD3A0;border-color:#5FD3A0;color:#111830}
:root[data-accent=forest][data-theme=dark] .logo b{color:#5FD3A0}
@media (prefers-color-scheme:dark){:root[data-accent=forest]:not([data-theme=light]){--coral:#5FD3A0;--coral-d:#5FD3A0}:root[data-accent=forest]:not([data-theme=light]) .btn.go,:root[data-accent=forest]:not([data-theme=light]) .btn.pri,:root[data-accent=forest]:not([data-theme=light]) .cmpbar #cmpgo{background:#5FD3A0;border-color:#5FD3A0;color:#111830}:root[data-accent=forest]:not([data-theme=light]) .logo b{color:#5FD3A0}}
:root[data-accent=plum]{--coral:#8E3A9B;--coral-d:#8E3A9B}
:root[data-accent=plum] .btn.pri,:root[data-accent=plum] .cmpbar #cmpgo{background:#8E3A9B;border-color:#8E3A9B;color:#fff}
:root[data-accent=plum] .logo b{color:#8E3A9B}
:root[data-accent=plum][data-theme=dark]{--coral:#D79BEA;--coral-d:#D79BEA}
:root[data-accent=plum][data-theme=dark] .btn.go,:root[data-accent=plum][data-theme=dark] .btn.pri,:root[data-accent=plum][data-theme=dark] .cmpbar #cmpgo{background:#D79BEA;border-color:#D79BEA;color:#111830}
:root[data-accent=plum][data-theme=dark] .logo b{color:#D79BEA}
@media (prefers-color-scheme:dark){:root[data-accent=plum]:not([data-theme=light]){--coral:#D79BEA;--coral-d:#D79BEA}:root[data-accent=plum]:not([data-theme=light]) .btn.go,:root[data-accent=plum]:not([data-theme=light]) .btn.pri,:root[data-accent=plum]:not([data-theme=light]) .cmpbar #cmpgo{background:#D79BEA;border-color:#D79BEA;color:#111830}:root[data-accent=plum]:not([data-theme=light]) .logo b{color:#D79BEA}}

/* ===== delight: gentle motion on name and category pages ===== */
@keyframes dl-up{from{opacity:0;transform:translateY(20px)}}
@keyframes dl-pin{0%{opacity:0;transform:scale(.4) rotate(-12deg)}60%{transform:scale(1.12) rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes dl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes dl-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--coral) 45%,transparent)}70%,100%{box-shadow:0 0 0 14px transparent}}
@keyframes dl-chip{from{opacity:0;transform:translateY(10px) scale(.9)}}
@keyframes dl-beat{0%,30%,100%{transform:rotate(-8deg) scale(1)}8%{transform:rotate(-8deg) scale(1.16)}16%{transform:rotate(-8deg) scale(1)}22%{transform:rotate(-8deg) scale(1.1)}}
@media (prefers-reduced-motion:no-preference){
 .logo i{animation:dl-beat 5s ease-in-out 1.5s infinite}
 .pg .hd .av2{animation:dl-pin .8s cubic-bezier(.3,1.4,.5,1) both,dl-float 5s ease-in-out 1s infinite}
 .pg h1{animation:dl-up .7s .1s cubic-bezier(.2,.7,.2,1) both}
 .pg .lead{animation:dl-up .7s .25s cubic-bezier(.2,.7,.2,1) both}
 .pg .cta{animation:dl-up .7s .4s cubic-bezier(.2,.7,.2,1) both}
 .pg .cta .btn.pri{animation:dl-ring 2.8s ease-out 1.6s 3}
 .pg .ent{animation:dl-up .6s .5s cubic-bezier(.2,.7,.2,1) both}
 .pg .ent:nth-child(2){animation-delay:.6s}.pg .ent:nth-child(3){animation-delay:.7s}
 .chips li{animation:dl-chip .45s cubic-bezier(.2,.7,.2,1) backwards}
 .chips li:nth-child(2){animation-delay:.04s}.chips li:nth-child(3){animation-delay:.08s}.chips li:nth-child(4){animation-delay:.12s}.chips li:nth-child(5){animation-delay:.16s}.chips li:nth-child(6){animation-delay:.2s}.chips li:nth-child(7){animation-delay:.24s}.chips li:nth-child(n+8){animation-delay:.28s}
 .chips a{transition:transform .2s,border-color .2s}.chips a:hover{transform:translateY(-2px) scale(1.04)}
 .btn:active{transform:scale(.95)}
 @supports (animation-timeline:view()){
  .pg h2,.pg .note,.pg .entries .ent{animation:dl-up linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
 }
}

/* ===== delight 2 for static pages (see js/pg-delight.js) ===== */
.dl2-bar{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,#F26B5B,#FFB347,#FF7AA5);transform-origin:0 50%;transform:scaleX(0);z-index:10000;pointer-events:none;will-change:transform}
@keyframes dl2-letter{0%{opacity:0;transform:translateY(.7em) scale(.6) rotate(-8deg)}60%{opacity:1;transform:translateY(-.12em) scale(1.12) rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes dl2-crown{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-3px) rotate(6deg)}}
@keyframes dl2-gold{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.dl2-l{display:inline-block;white-space:pre}
.tr li:first-child b{background:linear-gradient(100deg,var(--ink) 0 35%,#E0A100 50%,var(--ink) 65% 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tr li:first-child:after{content:"\1F451";margin-left:8px;display:inline-block}
@media (prefers-reduced-motion:no-preference){
 .dl2-l{animation:dl2-letter .7s cubic-bezier(.3,1.4,.5,1) both}
 .tr li:first-child b{animation:dl2-gold 4s ease-in-out infinite}
 .tr li:first-child:after{animation:dl2-crown 2.4s ease-in-out infinite}
 .tr li{transition:transform .2s,background-color .2s}.tr li:hover{transform:translateX(4px)}
}
@media (prefers-reduced-motion:reduce){.tr li:first-child b{-webkit-text-fill-color:currentColor;background:none}}
html.calm .dl2-bar{display:none}html.calm .dl2-l,html.calm .tr li:first-child b,html.calm .tr li:first-child:after{animation:none!important}
@media print{.dl2-bar{display:none}}

/* ===== header fits on phones now that there is a Baby care button ===== */
.tb .btn{white-space:nowrap}
@media (max-width:560px){
 .wrap>nav .logo{font-size:22px;gap:7px}.wrap>nav .logo i{width:28px;height:28px}
 .tb{gap:6px}.tb .btn{padding:8px 11px;font-size:13px}
 .tb a.btn[href="/browse/"]{display:none}
}

/* long-form pages (guides, about, policies) */
.art h1{margin-bottom:6px}.art h2{margin-top:30px}
.art p,.art ul{max-width:46em;font-size:17px}.art li{margin:.4rem 0}.art ul{padding-left:1.3rem}
.art .meta{color:var(--mut);font-size:14px;margin:0 0 18px}
.art .entries{display:grid;gap:14px;max-width:46em}.art .ent h2 a{text-decoration:none}
.art .cta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 20px}.art .cta .btn{text-decoration:none}