/* name.baby v2 — the one stylesheet (shell module). */

/* fonts */
@font-face{font-family:"Muli";font-style:normal;font-weight:400;font-display:swap;
src:local("Muli Regular"),local("Muli-Regular"),url(/css/7Auwp_0qiz-afTLGLQ.woff2) format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Muli";font-style:normal;font-weight:700;font-display:swap;
src:local("Muli Bold"),local("Muli-Bold"),url(/css/7Au_p_0qiz-adYnjOCX2zw.woff2) format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Muli Fallback";src:local("Arial");
size-adjust:96%;ascent-override:102%;descent-override:28%;line-gap-override:0%}

/* tokens */
:root{
--nb-bg:#FFFFFF;--nb-bg-2:#FAF8FC;--nb-bg-3:#F3E5F5;
--nb-line:#E6E1EC;--nb-line-2:#CFC7D8;--nb-input-line:#8A8299;
--nb-ink:#1F1A24;--nb-ink-2:#4A4458;--nb-ink-3:#6F6880;
--nb-brand:#8E24AA;--nb-brand-deep:#6A1B9A;--nb-brand-soft:#AB47BC;
--nb-focus:#6A1B9A;--nb-accent:#FFAB00;
--nb-up:#2E7D32;--nb-up-tint:#E8F5E9;--nb-down:#C62828;
--nb-girl:#C2185B;--nb-girl-tint:#FCE4EC;
--nb-boy:#1565C0;--nb-boy-tint:#E3F2FD;
--nb-unisex:#B45309;--nb-unisex-tint:#FFF3E0;
--nb-heart:#C2185B;
--font-body:"Muli","Muli Fallback",Arial,sans-serif;
--fs-display:2.5rem;--fs-h1:1.75rem;--fs-h2:1.375rem;--fs-h3:1.125rem;
--fs-body:1rem;--fs-sm:.875rem;--fs-xs:.75rem;
--lh-tight:1.1;--lh-body:1.6;
--s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.25rem;--s-6:1.5rem;
--s-8:2rem;--s-10:2.5rem;--s-12:3rem;--s-16:4rem;
--gutter:1rem;--section-gap:var(--s-8);--measure:42rem;
--r-sm:4px;--r-md:8px;--r-lg:12px;--r-pill:999px;
--shadow-1:0 1px 2px rgba(31,26,36,.06);--shadow-2:0 8px 24px -8px rgba(31,26,36,.18);
--ease:180ms cubic-bezier(.2,.7,.2,1);
--header-h:56px;
}
@media (min-width:768px){:root{--gutter:1.5rem}}
@media (min-width:1024px){:root{--gutter:2rem;--section-gap:var(--s-12);--header-h:64px;
--fs-display:3.5rem;--fs-h1:2.25rem;--fs-h2:1.5rem;--fs-body:1.0625rem}}
@media (prefers-reduced-motion:reduce){:root{--ease:0ms}}
.is-girl{--accent:var(--nb-girl);--accent-tint:var(--nb-girl-tint)}
.is-boy{--accent:var(--nb-boy);--accent-tint:var(--nb-boy-tint)}
.is-unisex{--accent:var(--nb-unisex);--accent-tint:var(--nb-unisex-tint)}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-padding-top:8px}
body{margin:0;font:400 var(--fs-body)/var(--lh-body) var(--font-body);color:var(--nb-ink);background:var(--nb-bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:700;color:var(--nb-ink);text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:1.15;margin-bottom:var(--s-3)}
h2{font-size:var(--fs-h2);line-height:1.25}
h3,.nb-h3{font-size:var(--fs-h3);line-height:1.3;margin:var(--s-4) 0 var(--s-2)}
p{margin:0 0 var(--s-4)}
ul,ol{margin:0;padding:0;list-style-type:""}
img,svg{display:inline-block;vertical-align:middle;max-width:100%}
img{height:auto}
a{color:var(--nb-brand-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--nb-ink)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
input,select,textarea{font:inherit}
hr{border:0;border-top:1px solid var(--nb-line);margin:var(--s-6) 0}
table{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--nb-focus);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.nb-skip{position:absolute;top:-100px;left:var(--s-2);z-index:100;padding:var(--s-2) var(--s-4);background:var(--nb-brand);color:#fff;border-radius:var(--r-sm);font-weight:700}
.nb-skip:focus{top:var(--s-2);outline-offset:0}
.nb-skip:hover{color:#fff}
.nb-icon{width:20px;height:20px;flex:none}
.nb-eyebrow{display:block;margin:0 0 var(--s-2);font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nb-ink-3)}
.nb-muted{color:var(--nb-ink-3);font-weight:400}
.nb-lede{font-size:calc(var(--fs-body) * 1.0625);color:var(--nb-ink-2);max-width:var(--measure)}
.nb-prose{max-width:var(--measure)}
.nb-prose p+p,.nb-prose ul{margin-top:var(--s-4)}
.nb-prose h2{font-size:var(--fs-h2);margin:var(--s-8) 0 var(--s-3)}
.nb-prose h3{margin-top:var(--s-6)}
.nb-prose ul,.nb-prose ol{padding-left:var(--s-5);list-style:disc;margin-bottom:var(--s-4)}
.nb-prose ol{list-style:decimal}
.nb-table a,.nb-chip,.nb-namelist a,.nb-state a,.nb-letters a,.nb-explore__card{text-decoration:none;font-weight:700;color:var(--accent,var(--nb-brand-deep))}
/* the rule above outranks a:hover, so these keep their colour and get the underline back on hover */
.nb-table a:hover,.nb-namelist a:hover{text-decoration:underline}
.nb-more{font-weight:700;text-decoration:none}

/* layout */
.nb-container{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.nb-layout{display:block;padding-top:var(--s-4);padding-bottom:var(--s-12)}
/* single-column pages keep the 1200 px container, so crumbs and H1 start under the logo like every other page: the text
   block (legal pages, authors) is capped at 56rem and left-aligned. Home, search and 404 centre their hero on the full width. */
.nb-layout--single>.nb-main{max-width:56rem}
.nb-page--home .nb-main,.nb-page--search .nb-main,.nb-page--404 .nb-main{max-width:none}
.nb-layout--narrow{max-width:26rem}
.nb-main{min-width:0}
.nb-aside{display:none}
@media (min-width:1024px){
.nb-layout--two{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.nb-layout--two .nb-aside{display:block;min-width:0;align-self:stretch}
}
.nb-aside__links{padding:var(--s-4);border:1px solid var(--nb-line);border-radius:var(--r-md)}
.nb-aside__links li a{display:block;padding:11px 0;font-size:var(--fs-sm);font-weight:700;text-decoration:none}
.nb-aside__links li+li{border-top:1px solid var(--nb-line)}
.nb-aside__sticky{margin-top:var(--s-6)}
/* sticks only where header + 16 + the 635 px sky fit (715 px); the aside stretches to main's height so it can travel */
@media (min-height:720px){.nb-aside__sticky{position:sticky;top:calc(var(--header-h) + 16px)}}
.nb-aside__sticky .ad{margin:0 auto}

/* header */
.nb-header{background:var(--nb-bg);border-bottom:1px solid var(--nb-line);z-index:40}
.nb-topbar{height:3px;background:linear-gradient(90deg,var(--nb-brand),var(--nb-brand-soft))}
.nb-header__row{display:flex;align-items:center;gap:var(--s-3);height:calc(var(--header-h) - 3px)}
.nb-burger,.nb-search-toggle,.nb-drawer__close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-sm);color:var(--nb-ink-2);flex:none}
.nb-burger .nb-icon,.nb-search-toggle .nb-icon,.nb-drawer__close .nb-icon{width:24px;height:24px}
.nb-burger:hover,.nb-search-toggle:hover{background:var(--nb-bg-3);color:var(--nb-brand-deep)}
.nb-logo{display:inline-flex;align-items:center;flex:1;justify-content:center;min-width:0}
.nb-logo img{height:34px;width:auto}
/* .nb-search.nb-search--header (0,2,0) so the generic .nb-search{display:flex} further down cannot show it */
.nb-nav,.nb-search.nb-search--header,.nb-account{display:none}
.nb-search-row{border-top:1px solid var(--nb-line);padding:var(--s-2) 0;background:var(--nb-bg)}
/* home, search and 404: the hero box is the page's search, so the header's (the toggle on phones, the box from 768) is
   hidden, keeping its slot (logo, nav and Sign in stay put). html.nb-hero-off (set by v2.js while the hero box is scrolled
   out of view) brings them back. */
html:not(.nb-hero-off) .nb-page--home .nb-search-toggle,html:not(.nb-hero-off) .nb-page--search .nb-search-toggle,html:not(.nb-hero-off) .nb-page--404 .nb-search-toggle{visibility:hidden}
/* without JavaScript (html.no-js until the head script swaps it): the drawer and the toggle cannot work. The <noscript>
   burger links to the footer instead; the toggle keeps its slot, so the phone logo stays centred; phones get the search row */
.no-js button.nb-burger{display:none}
.no-js .nb-search-toggle{visibility:hidden}
@media (max-width:767.98px){
.no-js .nb-search-row{display:block}
.no-js .nb-page--home .nb-search-row,.no-js .nb-page--search .nb-search-row,.no-js .nb-page--404 .nb-search-row{display:none}
}
@media (min-width:768px){
html:not(.nb-hero-off) .nb-page--home .nb-search--header:not(:focus-within),html:not(.nb-hero-off) .nb-page--search .nb-search--header:not(:focus-within),html:not(.nb-hero-off) .nb-page--404 .nb-search--header:not(:focus-within){visibility:hidden}
.nb-burger,.nb-search-toggle,.nb-search-row{display:none}
.nb-logo{flex:none;justify-content:flex-start}
.nb-logo img{height:40px}
/* nav links and the account link fill the header row: the current page's amber underline sits on its bottom edge */
.nb-nav{display:block;flex:none;align-self:stretch}
.nb-nav ul{display:flex;gap:var(--s-1);height:100%}
.nb-nav li{display:flex}
.nb-nav a{display:inline-flex;align-items:center;padding:0 var(--s-3);font-size:var(--fs-sm);font-weight:700;color:var(--nb-ink-2);text-decoration:none;white-space:nowrap;box-shadow:inset 0 -3px 0 transparent}
.nb-nav a:hover{color:var(--nb-brand-deep);background:var(--nb-bg-2)}
.nb-nav a[aria-current]{color:var(--nb-ink);box-shadow:inset 0 -3px 0 var(--nb-accent)}
/* up to 320px, and the first thing to give way when the row is tight (768-1023) */
.nb-search.nb-search--header{display:flex;flex:0 1 320px;min-width:0;margin-left:auto}
/* signed in, the avatar and 'My names' leave the box 60 px inside at 768 px: an ellipsis, not a cut word */
.nb-search--header .nb-input--search{text-overflow:ellipsis}
.nb-account{display:inline-flex;flex:none;align-self:stretch;align-items:center;gap:var(--s-2);padding:0 var(--s-3);font-size:var(--fs-sm);font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:inset 0 -3px 0 transparent}
.nb-account:hover{background:var(--nb-bg-2)}
.nb-account[aria-current]{color:var(--nb-ink);box-shadow:inset 0 -3px 0 var(--nb-accent)}
/* the focus ring goes inside the link (outside it would merge with the top bar), above the 3px underline */
.nb-nav a:focus-visible,.nb-account:focus-visible{outline-offset:-4px}
}
@media (min-width:768px) and (max-width:1023.98px){.nb-nav a{padding:0 var(--s-2)}}
/* sticky at every width, so menu and search stay in reach on long phone pages; not on short (landscape phone) screens,
   where header + a stuck table head would take a quarter of the view. The thead offset below uses the same guard, and so
   does the room anchor jumps leave for the header (8px on short screens, html in base, where the header scrolls away) */
@media (min-height:500px){.nb-header{position:sticky;top:0}}
@media (min-height:500px){html{scroll-padding-top:calc(var(--header-h) + 8px)}}
/* phones without JavaScript keep the search row open in the header (118px, not 56), so the header scrolls away there,
   as it did before it was made sticky: stuck, it hid the heading an anchor jump lands on (#states) and the stuck thead */
@media (max-width:767.98px){.no-js .nb-header{position:static}html.no-js{scroll-padding-top:8px}.no-js .nb-table thead th{top:0}}
.nb-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}

/* search */
.nb-search{position:relative;display:flex;align-items:stretch;width:100%}
/* field edges use --nb-input-line (3.7:1 on white, WCAG 1.4.11); --nb-line-2 stays for dividers and button outlines */
.nb-input{width:100%;height:48px;padding:0 var(--s-3);font-size:max(16px,1rem);color:var(--nb-ink);background:var(--nb-bg);border:1px solid var(--nb-input-line);border-radius:var(--r-sm)}
.nb-input:focus{border-color:var(--nb-brand)}
.nb-input--search{height:40px;padding-right:44px;border-radius:var(--r-pill);-webkit-appearance:none;appearance:none}
.nb-input--search::-webkit-search-decoration,.nb-input--search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.nb-search__go{position:absolute;top:0;right:0;height:100%;width:44px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);color:var(--nb-brand-deep);border-radius:0 var(--r-pill) var(--r-pill) 0}
.nb-search__go:hover{color:var(--nb-ink)}
.nb-search__word{display:none}
.nb-search--drawer .nb-input--search,.nb-search--row .nb-input--search{height:44px}
.nb-search--hero .nb-input--search{height:56px;padding-left:var(--s-5);border-width:2px;border-color:var(--nb-input-line);font-size:1.0625rem;box-shadow:var(--shadow-1)}
.nb-search--hero .nb-input--search:focus{border-color:var(--nb-brand)}
.nb-search--hero .nb-search__go{width:56px}
@media (min-width:768px){
.nb-search--hero .nb-input--search{padding-right:128px}
.nb-search--hero .nb-search__go{width:auto;padding:0 var(--s-5);margin:4px;height:calc(100% - 8px);background:var(--nb-brand);color:#fff;border-radius:var(--r-pill);font-weight:700;font-size:var(--fs-sm)}
.nb-search--hero .nb-search__go:hover{background:var(--nb-brand-deep)}
.nb-search--hero .nb-search__word{display:inline}
}
.nb-suggest{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:50;background:var(--nb-bg);border:1px solid var(--nb-line);border-radius:var(--r-md);box-shadow:var(--shadow-2);overflow:hidden;text-align:left}
.nb-suggest li a{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:var(--s-2) var(--s-4);font-weight:700;text-decoration:none;color:var(--nb-ink)}
/* the visible "No names start with …" row (aria-hidden: the .nb-live region speaks it) */
.nb-suggest .nb-suggest__note{display:flex;align-items:center;min-height:44px;padding:var(--s-2) var(--s-4);font-weight:400;color:var(--nb-ink-3)}
/* one highlight: v2.js moves aria-selected with the pointer as well as the keys, so :hover paints no second row. The <a> is
   the option (li role=none > a role=option), so aria-selected sits on it */
.nb-suggest a[aria-selected="true"]{background:var(--nb-bg-3);color:var(--nb-brand-deep)}
.nb-suggest a[aria-selected="true"] .nb-muted{color:var(--nb-ink-2)}
/* a list opened in the page (hero) slides under the sticky header (40) when the page scrolls, still above the picker (30) and thead (1) */
.nb-main .nb-suggest{z-index:35}

/* drawer */
.nb-drawer{position:fixed;top:0;left:0;bottom:0;z-index:60;width:300px;max-width:90vw;overflow-y:auto;background:var(--nb-bg);box-shadow:var(--shadow-2);transform:translateX(-100%);transition:transform var(--ease)}
.nb-drawer.is-open{transform:translateX(0)}
.nb-drawer__head{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding:0 var(--s-2) 0 var(--s-4);border-bottom:1px solid var(--nb-line)}
.nb-logo--drawer{flex:none}
.nb-logo--drawer img{height:32px}
.nb-drawer__search{padding:var(--s-3) var(--s-4)}
.nb-drawer__list{padding:var(--s-2) 0}
.nb-drawer__list--secondary{border-top:1px solid var(--nb-line)}
.nb-drawer__list li{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);padding:0 var(--s-4)}
.nb-drawer__list li>a{display:flex;align-items:center;min-height:48px;flex:1;font-weight:700;text-decoration:none;color:var(--nb-ink)}
.nb-drawer__list li>a:hover{color:var(--nb-brand-deep)}
/* the section being viewed (and Sign in / My names on their own pages), as the desktop nav marks it */
.nb-drawer__list li.is-current{background:var(--nb-bg-2);box-shadow:inset 3px 0 0 var(--nb-accent)}
.nb-drawer__list li.is-current>a{color:var(--nb-brand-deep)}
.nb-drawer__sub{font-size:var(--fs-sm);color:var(--nb-ink-3);white-space:nowrap}
.nb-drawer__sub a{display:inline-block;padding:var(--s-3) 0;text-decoration:none;font-weight:700}
.nb-scrim{position:fixed;inset:0;z-index:55;background:rgba(31,26,36,.4)}
.nb-noscroll{overflow:hidden}

/* breadcrumbs */
.nb-crumbs{min-height:40px;margin-bottom:var(--s-2);font-size:var(--fs-sm);color:var(--nb-ink-3)}
.nb-crumbs ol{display:flex;align-items:center;min-height:40px}
.nb-crumbs li{white-space:nowrap}
.nb-crumbs li+li::before{content:"›";padding:0 .5em;color:var(--nb-ink-3)}
.nb-crumbs a{color:var(--nb-ink-3);text-decoration:none}
.nb-crumbs a:hover{color:var(--nb-brand-deep);text-decoration:underline}
.nb-crumbs [aria-current]{color:var(--nb-ink-2)}
/* phone labels (nb_crumbs): __phone always replaces __wide below 600 px ('Popular' for Popular names), __code replaces
   __name only when v2.js finds the row still too narrow (is-tight: a state's postal code). The whole label stays for
   screen readers */
.nb-crumbs__phone,.nb-crumbs__code{display:none}
@media (max-width:599.98px){
.nb-crumbs__phone{display:inline}
.nb-crumbs__wide{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
}
@media (max-width:767.98px){
.nb-crumbs ol{overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding-right:16px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent)}
.nb-crumbs ol.is-tight .nb-crumbs__code{display:inline}
.nb-crumbs ol.is-tight .nb-crumbs__name{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* v2.js fits the trail (is-fit: the row's full width, no fade; a state's postal code, then a current title cut after a
   word); one that still does not fit wraps (is-wrap), so the row always opens at Name.Baby with every crumb whole. A
   title longer than the row wraps within itself. Without the script the row scrolls: swiped to its end (is-end) the
   fade moves to the start, in between (is-mid) both edges fade */
.nb-crumbs ol.is-fit{flex-wrap:wrap;padding-right:0;-webkit-mask-image:none;mask-image:none}
.nb-crumbs ol.is-fit li:last-child{white-space:normal}
.nb-crumbs ol.is-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px);mask-image:linear-gradient(90deg,transparent,#000 16px)}
.nb-crumbs ol.is-mid{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
.nb-crumbs ol::-webkit-scrollbar{display:none}
}
/* narrow phones: closer separators below 390 px and 13 px text below 360, the same on every page, so every list trail of
   one kind fits one line ('Name.Baby › Trending › WV › Boys › Top 10,000' at 320) instead of some wrapping */
@media (max-width:389.98px){.nb-crumbs li+li::before{padding:0 .4em}}
@media (max-width:359.98px){.nb-crumbs{font-size:.8125rem}.nb-crumbs li+li::before{padding:0 .25em}}
/* wider screens: a trail longer than the column (long article titles beside the sidebar) wraps instead of running out of it */
@media (min-width:768px){.nb-crumbs ol{flex-wrap:wrap}.nb-crumbs li{white-space:normal}}

/* footer */
.nb-footer{margin-top:var(--s-8);padding:var(--s-12) 0;background:var(--nb-bg-2);border-top:1px solid var(--nb-line);font-size:var(--fs-sm)}
.nb-footer__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-6);margin-bottom:var(--s-8)}
@media (min-width:768px){.nb-footer__grid{grid-template-columns:repeat(4,1fr)}}
.nb-footer__col li{padding:0;color:var(--nb-ink-2)}
.nb-footer__col a{display:inline-block;padding:11px 0;text-decoration:none;color:var(--nb-ink-2)}
.nb-footer__col a:hover{color:var(--nb-brand-deep);text-decoration:underline}
.nb-footer__data{margin:var(--s-6) 0 0;font-size:var(--fs-xs);color:var(--nb-ink-3)}

/* hero + letters */
.nb-hero{max-width:56rem;margin:var(--s-6) auto var(--s-6);text-align:center}
.nb-hero__title{font-size:var(--fs-h1);margin-bottom:var(--s-3)}
.nb-hero__sub{font-size:calc(var(--fs-body) * 1.0625);color:var(--nb-ink-2);margin:0 auto var(--s-6);max-width:var(--measure)}
.nb-hero .nb-search{max-width:36rem;margin:0 auto}
@media (min-width:1024px){.nb-hero{margin-top:var(--s-12)}.nb-hero__title{font-size:2.75rem}}
/* letter grids fill even rows: 7/7/7/5 below 400 px, 9/9/8 from 400, two rows of 13 from 600, and one row of 26 in the footer
   from 1200. Cells shrink with the row and stay square: at most 44 px on phones, 40 above, 48 in the hero (7 across on phones) */
.nb-letters ul{display:grid;grid-template-columns:repeat(7,minmax(0,44px));gap:4px}
.nb-letters a{display:inline-flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;border-radius:var(--r-sm);background:var(--nb-bg-2);font-size:var(--fs-sm);color:var(--nb-brand-deep)}
.nb-letters a:hover{background:var(--nb-bg-3)}
.nb-letters a[aria-current]{background:var(--nb-brand);color:#fff}
.nb-letters--hero{margin:var(--s-8) auto 0;max-width:56rem}
.nb-letters--hero ul{justify-content:center;grid-template-columns:repeat(7,minmax(0,48px))}
.nb-letters--hero a{font-size:var(--fs-body)}
/* the footer keeps a white fill and border: a tinted square would vanish on its --nb-bg-2 */
.nb-letters--footer a{background:var(--nb-bg);border:1px solid var(--nb-line)}
@media (min-width:400px){.nb-letters ul{grid-template-columns:repeat(9,minmax(0,44px))}.nb-letters--hero ul{grid-template-columns:repeat(7,minmax(0,48px))}}
@media (min-width:600px){.nb-letters ul{grid-template-columns:repeat(13,minmax(0,40px))}.nb-letters--hero ul{grid-template-columns:repeat(13,minmax(0,48px))}}
@media (min-width:1200px){.nb-letters--footer ul{grid-template-columns:repeat(26,minmax(0,40px))}}

/* sections */
.nb-section{margin-top:var(--section-gap)}
.nb-section__title{padding-bottom:var(--s-2);margin-bottom:var(--s-4);border-bottom:2px solid var(--nb-line)}
.nb-section--card{padding:var(--s-4);border:1px solid var(--nb-line);border-radius:var(--r-md)}
.nb-section--prose .nb-section__body{max-width:var(--measure)}
.nb-section--prose .nb-section__body p+p{margin-top:var(--s-4)}
/* a section's closing 'All … →' link (home: rising, years, articles) */
.nb-section__more{margin-top:var(--s-4)}
/* a one-line note under a section title (letter pages: the beginnings collected under 'Other J names') */
.nb-section__note{margin:0 0 var(--s-3);font-size:var(--fs-sm);color:var(--nb-ink-2)}
.nb-two-up{display:grid;grid-template-columns:1fr;gap:var(--s-6)}
@media (min-width:768px){.nb-two-up{grid-template-columns:1fr 1fr}}
.nb-two-up__col{min-width:0}
/* a two-up of whole sections (Popular / Trending for both sexes): a section's margin cannot collapse inside a grid item and
   doubled the gap under ad A (96 px), so the grid carries the section gap instead */
.nb-two-up:has(>.nb-two-up__col>.nb-section){margin-top:var(--section-gap);row-gap:var(--section-gap)}
.nb-two-up:has(>.nb-two-up__col>.nb-section)>.nb-two-up__col>.nb-section{margin-top:0}
/* /years/YYYY: one grid of girls 1-50, girls 51-100, ad B, boys 1-50, boys 51-100 (the phone reading order); from 768 the
   rank bands sit side by side with ad B between them. --noad when ad B is gated off, and the same when the unit is hidden
   (unfilled, or no JavaScript): its empty row would leave two gaps */
.nb-year-lists{grid-template-areas:"g1" "g2" "ad" "b1" "b2"}
.nb-year-lists--noad,.no-js .nb-year-lists,.nb-year-lists:has(>.nb-year-lists__ad>.ad.is-empty){grid-template-areas:"g1" "g2" "b1" "b2"}
.nb-year-lists__g1{grid-area:g1}.nb-year-lists__g2{grid-area:g2}.nb-year-lists__b1{grid-area:b1}.nb-year-lists__b2{grid-area:b2}
.nb-year-lists__ad{grid-area:ad;min-width:0}
.nb-year-lists__ad .ad{margin:calc(var(--section-gap) - var(--s-6)) auto}
@media (min-width:768px){
.nb-year-lists{grid-template-areas:"g1 b1" "ad ad" "g2 b2"}
.nb-year-lists--noad,.no-js .nb-year-lists,.nb-year-lists:has(>.nb-year-lists__ad>.ad.is-empty){grid-template-areas:"g1 b1" "g2 b2"}
}
/* phones: the girls run 1-100 first, so a link under the title jumps to the boys; both columns show at once from 768 */
.nb-year-lists__jump{margin:0 0 var(--s-2)}
@media (min-width:768px){.nb-year-lists__jump{display:none}}

/* buttons */
.nb-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:44px;padding:var(--s-1) var(--s-4);text-align:center;border-radius:var(--r-sm);border:1px solid transparent;font-size:var(--fs-sm);font-weight:700;text-decoration:none;transition:background var(--ease),color var(--ease)}
.nb-btn--primary{background:var(--nb-brand);color:#fff}
.nb-btn--primary:hover{background:var(--nb-brand-deep);color:#fff}
.nb-btn--ghost{border-color:var(--nb-line-2);color:var(--nb-brand-deep);background:transparent}
.nb-btn--ghost:hover{background:var(--nb-bg-3);color:var(--nb-brand-deep)}
.nb-btn--danger{border-color:var(--nb-line-2);color:var(--nb-down);background:transparent}
.nb-btn--danger:hover{background:#FDECEC;color:var(--nb-down)}
.nb-btn--block{display:flex;width:100%}
.nb-btn--sm{min-height:36px;padding:var(--s-1) var(--s-3)}
.nb-btn[disabled]{opacity:.5;cursor:default}

/* chips, gender */
.nb-chips{display:flex;flex-wrap:wrap;gap:0;margin:0 -4px var(--s-2)}
.nb-chips li{display:inline-flex}
.nb-chip,.nb-gender{display:inline-flex;align-items:center;gap:var(--s-2);min-height:36px;margin:4px;padding:0 var(--s-3);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:700;line-height:1;white-space:nowrap;text-decoration:none;background:var(--accent-tint,var(--nb-bg-2));color:var(--accent,var(--nb-brand-deep));border:1px solid color-mix(in srgb,var(--accent,var(--nb-line-2)) 35%,transparent)}
/* hover takes the chip's own --accent (the modifiers set theirs below, so a fact chip no longer turns the page's gender
   colour); the filled current chip keeps its white text */
a.nb-chip:not([aria-current]):hover,a.nb-gender:hover{border-color:var(--accent,var(--nb-brand-deep));color:var(--accent,var(--nb-brand-deep))}
.nb-chip--trend{--accent:var(--nb-up);background:var(--nb-up-tint);color:var(--nb-up);border-color:color-mix(in srgb,var(--nb-up) 35%,transparent)}
.nb-chip--fact{--accent:var(--nb-brand-deep);background:var(--nb-bg-3);color:var(--nb-brand-deep);border-color:color-mix(in srgb,var(--nb-brand) 30%,transparent)}
.nb-chip--muted{--accent:var(--nb-ink-3);background:var(--nb-bg-2);color:var(--nb-ink-3);border-color:var(--nb-line)}
.nb-chip[aria-current]{background:var(--nb-brand);color:#fff;border-color:var(--nb-brand)}
.nb-chip__n{font-weight:400;color:var(--nb-ink-3)}
/* the current chip (a prefix page's own beginning at its end) is filled: its count takes the white text, not the grey */
.nb-chip[aria-current] .nb-chip__n{color:inherit}
/* spellings with no name page: one plain line after the chips, not pills that look tappable */
.nb-related__plain{margin:0 0 var(--s-2);font-size:var(--fs-sm);color:var(--nb-ink-2)}
.nb-gender__dot,.nb-gender--dot{width:8px;height:8px;border-radius:50%;background:var(--accent,var(--nb-ink-3))}
.nb-gender--dot{display:inline-block;height:8px;min-height:0;margin:0 2px 0 0;padding:0;border:0;vertical-align:middle}
.nb-trend--up{color:var(--nb-up);font-weight:700}
.nb-trend--down{color:var(--nb-down);font-weight:700}
.nb-trend--steady{color:var(--nb-ink-3);font-weight:700}

/* name head + glance */
.nb-namehead__row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3)}
.nb-namehead__name{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:-.015em;margin:0 0 var(--s-2);overflow-wrap:anywhere}
.nb-namehead__chips{margin-bottom:var(--s-3)}
.nb-glance{margin-top:var(--s-4);padding:var(--s-4);background:var(--nb-bg-2);border:1px solid var(--nb-line);border-left:4px solid var(--accent,var(--nb-brand));border-radius:var(--r-md)}
/* the box's title, apart from the grey caps row labels */
.nb-glance>.nb-eyebrow{font-size:var(--fs-sm);color:var(--accent,var(--nb-brand-deep));margin-bottom:var(--s-3)}
.nb-glance__list{margin:0}
.nb-glance__row{display:grid;grid-template-columns:minmax(0,7rem) 1fr;gap:var(--s-3);padding:var(--s-2) 0;border-top:1px solid var(--nb-line)}
.nb-glance__row:first-child{border-top:0;padding-top:0}
.nb-glance__row dt{font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nb-ink-3);padding-top:3px}
.nb-glance__row dd{margin:0;font-size:var(--fs-body);line-height:1.45}
.nb-glance__row dd a{font-weight:700;text-decoration:none}
.nb-glance__row--wide dd{color:var(--nb-ink)}
/* Trend row: a line breaks only next to the arrow, never inside '#45 (2025)' */
.nb-glance__range{white-space:nowrap}
.nb-glance__sub{display:block}
@media (max-width:767.98px){.nb-glance__row--wide{grid-template-columns:1fr;gap:var(--s-1)}.nb-glance__row--wide dt{padding-top:0}}
@media (min-width:768px){.nb-glance{padding:var(--s-6)}}
/* Two columns where the main column has room for them: not at 1024-1159.98 px, where the 300 px aside leaves it
   620-755 px and each value ~146 px ('As a girl name' wrapped to four lines); from 1160 px a value gets 210 px or more */
@media (min-width:768px) and (max-width:1023.98px),(min-width:1160px){
.nb-glance__list{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s-8)}
.nb-glance__row--wide{grid-column:1 / -1}
.nb-glance__row--wide+.nb-glance__row,.nb-glance__row--wide+.nb-glance__row+.nb-glance__row{border-top:1px solid var(--nb-line)}
/* with no 'In short' row the first two rows share the top line: the second loses its rule too */
.nb-glance__row:first-child:not(.nb-glance__row--wide)+.nb-glance__row{border-top:0;padding-top:0}
/* an odd last short row (glanceRows marks it) spans both columns instead of sitting alone under a half-width rule */
.nb-glance__row--full{grid-column:1 / -1}
}

/* tables */
.nb-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.nb-table th,.nb-table td{padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--nb-line);text-align:left;vertical-align:middle}
.nb-table thead th{position:sticky;top:0;z-index:1;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nb-ink-2);background:var(--accent-tint,var(--nb-bg-2))}
@media (min-height:500px){.nb-table thead th{top:var(--header-h)}}
/* each th paints its own tint, and at fractional cell edges (DPR 2.625) a lighter 1-device-px seam showed between them:
   a tint layer under the text runs 1px into the next cell (a 1px box-shadow did not cover every edge) */
.nb-table thead th:not(:last-child)::after{content:"";position:absolute;top:0;bottom:0;left:0;right:-1px;z-index:-1;background:var(--accent-tint,var(--nb-bg-2))}
.nb-table tbody tr{height:44px}
.nb-table tbody tr:nth-child(even){background:var(--nb-bg-2)}
.nb-table tbody th{font-size:var(--fs-body);font-weight:700;padding-top:0;padding-bottom:0}
/* a second tbody under a row header ("U.S. territories", th[scope=rowgroup]): set like the thead labels, above its rows,
   not as a 44 px body row */
.nb-table__group th[scope="rowgroup"]{padding-top:var(--s-4);padding-bottom:var(--s-1);font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nb-ink-2)}
.nb-table__group tr:first-child{height:auto;background:none}
/* the link reaches 6 px into the cell padding, so its focus ring can sit inside it: the sticky thead covered the top of
   an outside ring on row 1, and an inside ring needs that room to clear the first letter */
/* scroll-margin: a focused row also clears the sticky thead (scroll-padding covers the site header) */
.nb-table tbody th a{display:block;padding:10px 6px;margin:0 -6px;scroll-margin-top:2.5rem}
.nb-table tbody th a:focus-visible{outline-offset:-2px}
.nb-table .num,.nb-table th.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--nb-ink-2);white-space:nowrap}
.nb-table thead .num{text-align:right}
.nb-rank{width:2.5rem;color:var(--nb-ink-2);white-space:nowrap}
/* rank tables: one row style everywhere (compact ones are striped and 44 px too), and fixed columns so the tables an ad
   splits, and girls beside boys, line up: # fits "1,000", a fourth column (vs / Since / rank) takes a fixed share, Name and
   Babies share the rest (Babies is right-aligned, so its numbers end at the same x in every chunk). */
.nb-table--rank .nb-rank{box-sizing:content-box;width:2.5em}
/* a letter page's two tables when either shows a five-digit national rank ('10,107'): both columns fit it */
.nb-table--rank.nb-table--rank-5 .nb-rank{width:3.25em}
.nb-table--rank:not(.nb-table--favs) thead th:nth-child(4){width:27%}
.nb-page--list-trending .nb-table--rank thead th:nth-child(4){width:38%}
/* under 375 px 40%: at 38% of a 328 px table the widest top-10,000 cells (118 px) would wrap in every chunk */
@media (max-width:374.98px){.nb-page--list-trending .nb-table--rank thead th:nth-child(4){width:40%}}
/* phones of 360-439 px: trending tables take fixed columns, so every chunk an ad splits (and 'Holding steady' under them)
   has its columns at the same x. With automatic widths one long name (Muhammadyusuf, top 10,000 boys) pulled its chunk's
   columns 13-33 px off the others and wrapped all of its Since cells; from 440 px they line up as they are. # fits '100'
   (the trend order), Babies its 'BABIES' head ('19,234' is narrower), and Since the widest cell of the list's scope
   (nb-table--top100/1000/10000: '#3,229 → #14', '#12,185 → #1,118') on one line; Name takes the rest. The rare name wider
   than that wraps inside its cell, hyphenated where the browser can: of all 378 trending lists, four at 360 px
   (Muhammadyusuf, Muhammadali twice, Montgomery) and one at 390 px. The lower bound is in em, so with larger text the
   automatic widths stay, as they do under 360 px: fixed ones would wrap common names there */
@media (min-width:22.5em) and (max-width:439.98px){
.nb-page--list-trending .nb-table--rank{table-layout:fixed}
.nb-page--list-trending .nb-table--rank thead th{box-sizing:border-box}
.nb-page--list-trending .nb-table--rank thead th:nth-child(1){width:2.25rem}
.nb-page--list-trending .nb-table--rank thead th:nth-child(3){width:3.5rem}
.nb-page--list-trending .nb-table--rank.nb-table--top100 thead th:nth-child(4){width:7rem}
.nb-page--list-trending .nb-table--rank.nb-table--top1000 thead th:nth-child(4){width:7.75rem}
.nb-page--list-trending .nb-table--rank.nb-table--top10000 thead th:nth-child(4){width:8.125rem}
.nb-page--list-trending .nb-table--rank tbody th a{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
}
.nb-table--years th,.nb-table--years td{padding-top:var(--s-1);padding-bottom:var(--s-1)}
.nb-table--years tbody tr{height:36px}
.nb-table--years tbody th{font-size:var(--fs-sm)}
.nb-table--years tbody th a{padding-top:6px;padding-bottom:6px}
/* /years stacks one table per decade: shares of the width keep year, #1 girl and #1 boy at the same x in all fifteen */
.nb-table--decades thead th:first-child{width:20%}
.nb-table--decades thead th:not(:first-child){width:40%}
/* home 'Names by year': rows, names and width as the girls and boys tables above it (44 px rows, names at body size, the whole
   section); it used the /years table's 36 px rows and 14 px links at 42rem. The year takes the rank column's share */
.nb-table--home-years td{font-size:var(--fs-body)}
.nb-table--home-years thead th:first-child{width:20%}
/* each link stays whole ('Rising in the / top 1,000' broke beside the 300 px aside) and the · between two links is drawn in the
   gap before the second one: when that link wraps, its · falls left of the box (the inset is a margin, not padding) and the
   clip cuts it, so no line ends or starts with a dot. The clip keeps 5 px for the focus ring and 12 px for the taller targets */
.nb-table__foot{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:1.2em;margin:var(--s-2) var(--s-3) 0;padding:0;clip-path:inset(-12px -5px);font-size:var(--fs-sm);font-weight:700}
.nb-table__foot a{position:relative;text-decoration:none;white-space:nowrap}
.nb-table__foot a+a::before{content:"\00b7";content:"\00b7"/"";position:absolute;right:calc(100% + .6em);transform:translateX(50%);color:var(--nb-ink);pointer-events:none}
/* under a trending table whose 'Since' column shows that year's last rank (the 5-birth floor) */
.nb-table__note{margin:var(--s-2) 0 0;padding:0 var(--s-3);font-size:var(--fs-xs);line-height:1.5;color:var(--nb-ink-2)}
/* a table with no rows (trending girls in the U.S. Territories) */
.nb-table-empty{margin:0;padding:var(--s-4);border:1px dashed var(--nb-line-2);border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--nb-ink-2)}
.nb-table+.nb-table,.ad+.nb-table,.nb-table__note+.nb-table{margin-top:var(--s-6)}
/* a list split by units (output_chunks): where the unit between two chunks is unfilled, gated off or not printed, the next
   chunk (nb-table--cont) runs on from the one above it: no gap, and its header row is clipped to nothing (screen readers
   still get it, and its labels still size the columns as in the chunk above). v2.js carries the stripes over (is-flip).
   A note or 'Top of list' between the two keeps the header: the table starts afresh there */
.nb-table+.nb-table--cont,.nb-table+.ad.is-empty+.nb-table--cont,.no-js .nb-table+.ad+.nb-table--cont{margin-top:0}
.nb-table+.nb-table--cont:not(.is-run) thead th,.nb-table+.ad.is-empty+.nb-table--cont:not(.is-run) thead th,.no-js .nb-table+.ad+.nb-table--cont thead th{height:0;padding-top:0;padding-bottom:0;border:0;line-height:0;clip-path:inset(50%)}
/* with v2.js (is-run) the header row stays, over the last rows of the chunk above and transparent, and shows once it sticks
   under the site header (is-stuck), so the labels stay in view down the run; the clipped one left ranks 26-100 with none */
.nb-table+.nb-table--cont.is-run,.nb-table+.ad.is-empty+.nb-table--cont.is-run{margin-top:calc(-1 * var(--nb-run-h, 0px))}
.nb-table--cont.is-run:not(.is-stuck) thead th{opacity:0;border-bottom-color:transparent}
/* taps on the rows under it reach their links */
.nb-table--cont.is-run{pointer-events:none}
.nb-table--cont.is-run tbody{pointer-events:auto}
.nb-table.is-flip tbody tr:nth-child(odd),.no-js .nb-table--odd tbody tr:nth-child(odd){background:var(--nb-bg-2)}
.nb-table.is-flip tbody tr:nth-child(even),.no-js .nb-table--odd tbody tr:nth-child(even){background:none}
/* the 1,000 lists: 'Jump to ranks' above the first table and 'Top of list' after each long one, which leads back to it.
   44 px targets */
.nb-rank-jump{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-1);margin:0 0 var(--s-2);font-size:var(--fs-sm)}
.nb-rank-jump__label{margin-right:var(--s-1);color:var(--nb-ink-2)}
.nb-rank-jump ul{display:flex;flex-wrap:wrap;gap:0 var(--s-1);margin:0;padding:0}
/* set like the other in-page jump links (.nb-more: bold, no underline) */
.nb-rank-jump a,.nb-rank-top a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-2);font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}
.nb-rank-top{margin:var(--s-1) 0 0;text-align:right;font-size:var(--fs-sm)}
/* phones: tighter cells and headers that may wrap, so tables fit the column with larger text (no scroll wrapper: it would unstick
   thead). Below the foot and note rules, so their 6 px inset is not overridden by the base padding */
@media (max-width:599.98px){
.nb-table th,.nb-table td{padding-left:6px;padding-right:6px}
.nb-table thead th,.nb-table thead .num{white-space:normal;letter-spacing:0}
.nb-table__note{padding:0 6px}
.nb-table__foot{margin-left:6px;margin-right:6px}
}
/* the line above a trending page's first table (what # and 'Since' mean) belongs to that table: no top margin, 8 px under */
.nb-table__intro{margin:0 0 var(--s-2)}
.nb-table__intro+.nb-table{margin-top:0}
/* girls beside boys (two-up) from 768: 8 px cells and no thead letter-spacing, so both tables fit their column */
@media (min-width:768px){
.nb-two-up .nb-table th,.nb-two-up .nb-table td{padding-inline:var(--s-2)}
.nb-two-up .nb-table thead th{letter-spacing:0}
}
.nb-delta{font-weight:700;white-space:nowrap}
.nb-delta--up{color:var(--nb-up)}
.nb-delta--down{color:var(--nb-down)}
.nb-delta--same,.nb-delta--new{color:var(--nb-ink-3);font-weight:400}
/* a trending 'Since' cell (sinceCell) may break before its arrow only (a no-break space follows it), so a chunk with a long
   name wraps it instead of running past a 320-360 px screen; td.num stays nowrap */
.nb-table .nb-since{white-space:normal}

/* chart */
.nb-chart{margin:var(--s-4) 0}
.nb-chart img{display:block;width:100%;height:auto;aspect-ratio:1024 / 600;background:#fff;border-radius:var(--r-md);border:1px solid var(--nb-line)}
.nb-chart--map img{aspect-ratio:1024 / 750}
/* article charts (Content::cleanHtml) are 600x300 */
.nb-chart--custom img{aspect-ratio:2 / 1}
/* name pages: a <picture> whose <source> serves a 640-unit render with phone-sized type below 640 px (K5), 640 x 520 for
   the chart, 640 x 620 for the map. Also at 1024-1159.98 px, where the 300 px aside leaves a 586-755 px column and the
   1024-unit render's labels came out at ~8 px; the same media list is in Name::chartFigure() and NameList::mapFigure() */
.nb-chart picture{display:block}
@media (max-width:639.98px),(min-width:1024px) and (max-width:1159.98px){
.nb-chart--phone-line img{aspect-ratio:640 / 520}
.nb-chart--phone-map img{aspect-ratio:640 / 620}
.nb-chart--phone-list img{aspect-ratio:640 / 400}
}
.nb-chart figcaption{margin-top:var(--s-2);font-size:var(--fs-xs);color:var(--nb-ink-3)}
/* the key at the head of a caption: bars in the name's girl or boy colour (li.is-girl / .is-boy set --accent), the rank line
   and a one-year name's dot in the chart's ink. Each swatch is centred on the first 21 px line, so a key that wraps keeps it
   beside its first words */
.nb-chart__key{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);margin:0 0 var(--s-1);padding:0;font-size:var(--fs-sm);color:var(--nb-ink-2)}
.nb-chart__key li{display:flex;align-items:flex-start;gap:var(--s-2);line-height:21px}
.nb-chart__key li::before{content:"";flex:none}
.nb-chart__key-bar::before{width:12px;height:12px;margin-top:4.5px;border-radius:2px;background:var(--accent,#3366cc)}
.nb-chart__key-line::before{width:22px;height:3px;margin-top:9px;border-radius:2px;background:#1F1A24}
.nb-chart__key-dot::before{width:10px;height:10px;margin-top:5.5px;border-radius:50%;background:#1F1A24}
/* list maps: the phone render is the colours alone, and the caption's key names them (swatch, name, states); from
   640 px the names are on the map, so the key is not shown */
.nb-chart__key--names li::before{content:none}
.nb-chart__swatch{flex:none;width:12px;height:12px;margin-top:4.5px}
.nb-chart__swatch rect{stroke:rgb(31 26 36 / .3);stroke-width:1}
.nb-chart__count{color:var(--nb-ink-3)}
@media (min-width:640px) and (max-width:1023.98px),(min-width:1160px){.nb-chart__key.nb-chart__key--names{display:none}}
/* 'Download: PNG · SVG' ends every caption: one line, the two links bold so they read as actions */
.nb-chart__dl{white-space:nowrap}
.nb-chart__dl a{font-weight:700}

/* details */
.nb-details{margin:var(--s-4) 0;border:1px solid var(--nb-line);border-radius:var(--r-md)}
.nb-details summary{display:flex;align-items:center;gap:var(--s-2);min-height:48px;padding:var(--s-2) var(--s-4);font-weight:700;color:var(--nb-brand-deep);cursor:pointer;list-style:none}
.nb-details summary::-webkit-details-marker{display:none}
.nb-details summary .nb-icon{transition:transform var(--ease);color:var(--nb-ink-3)}
.nb-details[open]>summary .nb-icon{transform:rotate(90deg)}
.nb-details[open]>summary{border-bottom:1px solid var(--nb-line)}
.nb-details__hint{margin-left:auto;font-size:var(--fs-xs);font-weight:400;color:var(--nb-ink-3);white-space:nowrap}
.nb-details__body{padding:var(--s-4)}
/* 'Hide table' at the end of a long table (nb_details_close): closes it and brings the summary back; styled like it.
   Printed hidden and shown by v2.js, so without JavaScript it stays hidden (display:inline-flex would override [hidden]) */
.nb-details__foot{margin:var(--s-3) 0 0;text-align:center}
.nb-details__close{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4);border-radius:var(--r-pill);font-weight:700;color:var(--nb-brand-deep)}
.nb-details__close[hidden]{display:none}
.nb-details__close:hover{background:var(--nb-bg-3);color:var(--nb-ink)}
.nb-details__close .nb-icon{transform:rotate(-90deg);color:var(--nb-ink-3)}

/* pronunciation player */
.nb-say{display:flex;align-items:center;gap:var(--s-3);min-height:44px}
.nb-say__btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--nb-brand);color:#fff}
.nb-say__btn:hover{background:var(--nb-brand-deep)}
.nb-say__btn .nb-icon--pause,.nb-say__btn[aria-pressed="true"] .nb-icon--play{display:none}
.nb-say__btn[aria-pressed="true"] .nb-icon--pause{display:inline-block}
.nb-say.is-error .nb-say__btn{background:var(--nb-ink-3)}
/* the note v2.js adds inside .nb-say__text while a clip cannot load */
.nb-say__err{font-size:var(--fs-sm);font-weight:400;color:var(--nb-ink-2)}
/* without JavaScript the button cannot play: the <noscript> MP3 link stands in for it */
.no-js .nb-say__btn{display:none}
.nb-say noscript a{white-space:nowrap}
.nb-ipa{color:var(--nb-ink-2)}
.nb-say-list li{padding:var(--s-2) 0;border-top:1px solid var(--nb-line)}
.nb-say-list li:first-child{border-top:0}

/* heart */
.nb-heart{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:50%;color:var(--nb-ink-3);transition:color var(--ease),background var(--ease)}
.nb-heart .nb-icon{width:24px;height:24px}
.nb-heart:hover{color:var(--nb-heart);background:var(--nb-girl-tint)}
.nb-heart[aria-pressed="true"]{color:var(--nb-heart);--heart-fill:currentColor}
/* v2.js: 'Could not save Noah. Try again.' under the head row, at its end under the heart, until the next press */
.nb-heart-msg{margin:0 0 var(--s-2);text-align:right;font-size:var(--fs-sm);font-weight:700;color:var(--nb-down)}

/* name list, state grid */
/* 10rem columns, squeezed to half the width so 320-412 px phones keep two; never under 8rem (large text drops to one) or over 100% */
.nb-namelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,max(min(10rem,calc(50% - .5rem)),8rem)),1fr));gap:0 var(--s-4)}
/* padding + equal negative margin: same layout, but the clip sits 4px out on the left, top and bottom so a link's focus ring shows;
   the right edge stays flush, where the ellipsis cuts long names */
.nb-namelist li{line-height:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px 0 4px 4px;margin:-4px 0 -4px -4px}
.nb-namelist a{display:inline-block;padding:10px 0;line-height:24px}
.nb-namelist__meta{font-size:var(--fs-xs);color:var(--nb-ink-3)}
/* the key to the name colours (nb_gender_key): each word in its colour after the same dot the lists print */
.nb-gender-key{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-4);margin:var(--s-3) 0 var(--s-2);font-size:var(--fs-sm)}
.nb-gender-key__item{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--accent)}
.nb-gender-key .nb-gender--dot{margin:0}
.nb-state-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(9.5rem,100%),1fr));gap:var(--s-2)}
.nb-state a{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:var(--s-2) var(--s-3);border:1px solid var(--nb-line);border-radius:var(--r-sm);line-height:1.3}
.nb-state a:hover{background:var(--nb-bg-3)}
.nb-state__name{font-size:var(--fs-sm)}
.nb-state__top{font-size:var(--fs-xs);font-weight:400;color:var(--nb-ink-3)}

/* filters: segments + picker */
/* 16 px between groups, so they read apart; the place list hangs from the whole row (its containing block) */
.nb-filters{position:relative;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin:var(--s-4) 0}
/* trending scope: the lead-in 'Rising in the top' + short tabs; the lead-in wraps above the tabs only below ~330 px */
.nb-filters__group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2);max-width:100%}
.nb-filters__label{font-size:var(--fs-sm);font-weight:700;color:var(--nb-ink-2)}
.nb-seg{display:inline-flex;flex-wrap:wrap;max-width:100%;min-height:44px;border:1px solid var(--nb-line-2);border-radius:var(--r-sm);overflow:hidden}
.nb-seg a{display:inline-flex;align-items:center;padding:0 var(--s-3);font-size:var(--fs-sm);font-weight:700;color:var(--nb-ink-2);text-decoration:none;white-space:nowrap}
.nb-seg a+a{border-left:1px solid var(--nb-line-2)}
.nb-seg a:hover{background:var(--nb-bg-2);color:var(--nb-brand-deep)}
/* one 'selected' look: solid brand, like letters, pagination and chips */
.nb-seg a[aria-current]{background:var(--nb-brand);color:#fff}
/* ring drawn inside (the group clips), with a 2px white band; white itself on the filled current segment */
.nb-seg a:focus-visible{outline-offset:-4px;box-shadow:inset 0 0 0 2px var(--nb-bg)}
.nb-seg a[aria-current]:focus-visible{outline-color:#fff}
.nb-picker summary{display:inline-flex;align-items:center;gap:var(--s-1);height:44px;padding:0 var(--s-2) 0 var(--s-3);border:1px solid var(--nb-line-2);border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:700;color:var(--nb-ink-2);cursor:pointer;list-style:none;white-space:nowrap}
.nb-picker summary::-webkit-details-marker{display:none}
.nb-picker summary:hover{background:var(--nb-bg-2);color:var(--nb-brand-deep)}
/* the chevron points down when closed, up when open */
.nb-picker summary .nb-icon{color:var(--nb-ink-3);transform:rotate(90deg);transition:transform var(--ease)}
.nb-picker[open] summary .nb-icon{transform:rotate(-90deg)}
/* anchored to .nb-filters, not to the summary: full row width, so it never runs off the screen or over the sidebar */
.nb-picker ul{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:0 var(--s-2);max-height:60vh;overflow:auto;padding:var(--s-2);background:var(--nb-bg);border:1px solid var(--nb-line);border-radius:var(--r-md);box-shadow:var(--shadow-2)}
/* long names wrap (District of Columbia) instead of overprinting the next column */
.nb-picker li a{display:block;padding:11px var(--s-3);font-size:var(--fs-sm);font-weight:700;text-decoration:none;border-radius:var(--r-sm)}
.nb-picker li a:hover{background:var(--nb-bg-2)}
.nb-picker li a[aria-current]{background:var(--nb-brand);color:#fff}
@media (max-width:479.98px){.nb-picker ul{grid-template-columns:1fr 1fr}}

/* pagination */
.nb-pagination{margin:var(--s-8) 0 var(--s-4)}
.nb-pagination ul{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-1)}
.nb-pagination a,.nb-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 var(--s-3);border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:700;text-decoration:none}
.nb-pagination a:hover{background:var(--nb-bg-3)}
.nb-pagination [aria-current]{background:var(--nb-brand);color:#fff}
.nb-pagination__gap{color:var(--nb-ink-3)}
/* phones: 'Page 5 of 9' between Previous and Next in place of the numbers (li.is-num), which wrapped onto two rows */
.nb-pagination__status{display:none}
@media (max-width:639.98px){
.nb-pagination li.is-num{display:none}
.nb-pagination__status{display:inline-flex;align-items:center;height:44px;padding:0 var(--s-2);font-size:var(--fs-sm);color:var(--nb-ink-2);white-space:nowrap}
}

/* forms */
.nb-form{margin:var(--s-6) 0}
.nb-field{margin-bottom:var(--s-4)}
.nb-field label{display:block;margin-bottom:var(--s-1);font-size:var(--fs-sm);font-weight:700;color:var(--nb-ink-2)}
.nb-field .nb-hint{display:block;margin-top:var(--s-1);font-size:var(--fs-xs);color:var(--nb-ink-3)}
.nb-input[aria-invalid="true"],.nb-field.is-error .nb-input{border-color:var(--nb-down)}
.nb-form__error{margin:0 0 var(--s-4);padding:var(--s-2) var(--s-3);font-size:var(--fs-sm);color:var(--nb-down);background:#FDECEC;border-radius:var(--r-sm)}
/* an error that concerns no single field takes focus itself so it is read out: a message, not a control, so no ring */
.nb-form__error[tabindex="-1"]:focus{outline:none}
.nb-form__error a{font-weight:700;white-space:nowrap}
/* /signin?created=1: the account exists but could not be signed in at once */
.nb-form__ok{margin:var(--s-4) 0 0;padding:var(--s-2) var(--s-3);font-size:var(--fs-sm);color:var(--nb-up);background:var(--nb-up-tint);border-radius:var(--r-sm)}
/* the 'or' between the email form and the Google button is real text: <p class="nb-or"><span>or</span></p> */
.nb-or{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-5) 0;font-size:var(--fs-sm);line-height:1.4;color:var(--nb-ink-3)}
.nb-or::before,.nb-or::after{content:"";flex:1 1 0;border-top:1px solid var(--nb-line)}
.nb-fav-remove-row{transition:opacity var(--ease)}
.nb-fav-remove-row.is-removing{opacity:0}

/* cards, explore */
.nb-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr));gap:var(--s-6)}
/* three cards ('More articles') share one row from 768 instead of 2 + 1 beside an empty cell */
@media (min-width:768px){.nb-card-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}}
/* four cards (home, /articles): 4, 2 or 1 columns by the grid's own width, never 3 + 1 (home at 870-1159 px). The track
   minimum is a quarter of the width where four 16rem cards fit, else a half where two fit, else all of it; each min()
   term drops to 0 or below past its width. The 1px keeps rounding from losing a column. */
.nb-card-grid--4{--card:16rem;grid-template-columns:repeat(auto-fill,minmax(max(calc((100% - 3 * var(--s-6)) / 4 - 1px),min(calc((100% - var(--s-6)) / 2 - 1px),calc((4 * var(--card) + 3 * var(--s-6) - 100%) * 999)),min(100%,calc((2 * var(--card) + var(--s-6) - 100%) * 999))),1fr))}
.nb-card-grid__ad,.nb-letter-grid__ad{grid-column:1 / -1}
.nb-card{display:flex;flex-direction:column;border:1px solid var(--nb-line);border-radius:var(--r-md);overflow:hidden;background:var(--nb-bg)}
.nb-card__media img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}
.nb-card__body{padding:var(--s-4)}
.nb-card__title{font-size:var(--fs-h3);margin:0 0 var(--s-2)}
.nb-card__title a{text-decoration:none;color:var(--nb-ink)}
.nb-card__title a:hover{color:var(--nb-brand-deep)}
.nb-card__meta{margin:0 0 var(--s-2);font-size:var(--fs-xs);color:var(--nb-ink-3)}
.nb-card__desc{margin:0;font-size:var(--fs-sm);color:var(--nb-ink-2)}
.nb-explore{margin-top:var(--section-gap)}
/* one column on phones; from 600 the count's own column number (nb_explore: --c2 for 2, 4 or 5 cards, --c3 for 3 or 6),
   so the rows fill evenly (four cards are 2 + 2, not 3 + 1) */
.nb-explore ul{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
@media (min-width:600px){.nb-explore--c2 ul{grid-template-columns:repeat(2,minmax(0,1fr))}.nb-explore--c3 ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* height:100% fills the grid cell, so the cards of one row match when only one title wraps */
.nb-explore__card{display:flex;align-items:center;gap:var(--s-2);height:100%;min-height:64px;padding:var(--s-3) var(--s-4);border:1px solid var(--nb-line);border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.3}
.nb-explore__card span{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--nb-ink-3)}
/* title and sub-label stack in one block (div.nb-explore__text) */
.nb-explore__text{min-width:0}
.nb-explore__card .nb-explore__text span{margin-top:2px}
.nb-explore__card .nb-icon{margin-left:auto;color:var(--nb-ink-3)}
.nb-explore__card:hover{background:var(--nb-bg-2);border-color:var(--nb-line-2)}

/* about box + small blocks */
.nb-about{margin-top:var(--section-gap);padding:var(--s-4) 0;border-top:1px solid var(--nb-line);font-size:var(--fs-xs);color:var(--nb-ink-3)}
.nb-about p{margin:0 0 var(--s-2)}
.nb-about a{color:var(--nb-ink-2)}
.nb-about a:hover{color:var(--nb-brand-deep)}
.nb-about__avatar{width:24px;height:24px;border-radius:50%;object-fit:cover}
.nb-seealso{margin-top:var(--s-6)}
/* the entries keep the reading measure; their section, and so the 'More people' disclosure, is full width */
.nb-people{max-width:var(--measure)}
.nb-people li{padding:var(--s-3) 0;border-top:1px solid var(--nb-line)}
.nb-people li:first-child{border-top:0;padding-top:0}
.nb-banner--draft{margin-bottom:var(--s-4);padding:var(--s-2) var(--s-4);background:var(--nb-unisex-tint);color:var(--nb-unisex);border-radius:var(--r-sm);font-weight:700;font-size:var(--fs-sm)}
.nb-backlink{display:inline-block;margin-bottom:var(--s-3);font-size:var(--fs-sm);font-weight:700;text-decoration:none}
.nb-pagenav{margin-top:var(--s-8)}
.nb-funfact{margin:var(--section-gap) 0 0;padding:var(--s-4) var(--s-5);background:var(--nb-bg-3);border-radius:var(--r-md);font-size:var(--fs-body)}
/* the 15 decade chips wrap into balanced rows (8 + 7, not 11 + 4): text-wrap:balance needs inline content, so not flex */
.nb-decades{display:block;margin-bottom:var(--s-4);text-wrap:balance}
.nb-decades li{vertical-align:top}
.nb-byline{font-size:var(--fs-sm);color:var(--nb-ink-3)}
/* capped so laptops and desktops reach the text on the first screen; cover crops it rather than squashing it */
.nb-article__hero{display:block;width:100%;height:auto;max-height:clamp(12rem,40vh,360px);aspect-ratio:16 / 9;object-fit:cover;border-radius:var(--r-md);margin:var(--s-4) 0}
.nb-article__body{margin-top:var(--s-6)}
.nb-h1__page{display:block;font-size:var(--fs-sm);font-weight:400;color:var(--nb-ink-3);margin-top:var(--s-1)}
/* 10rem cards, two on phones and one at large text (as .nb-namelist), but never more than four: a track is at least a quarter
   of the row, so the ad after the 12th card always ends a full row */
.nb-letter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(calc((100% - 3 * var(--s-3)) / 4),min(100%,max(min(10rem,calc(50% - .375rem)),8rem))),1fr));gap:var(--s-3)}
.nb-letter-card a{display:flex;flex-direction:column;min-height:7rem;padding:var(--s-3) var(--s-4);border:1px solid var(--nb-line);border-radius:var(--r-md);text-decoration:none}
.nb-letter-card a:hover{background:var(--nb-bg-2)}
/* grid rows stretch the li; the bordered child fills it so side-by-side cards end level (letter, article and state cards) */
.nb-letter-card a,.nb-card-grid>li>.nb-card,.nb-state a{height:100%}
.nb-letter-card__l{font-size:var(--fs-h2);font-weight:700;color:var(--nb-brand-deep)}
.nb-letter-card__n{font-size:var(--fs-sm);font-weight:700;color:var(--nb-ink)}
/* right under the count in every card: margin-top:auto dropped a one-line sample to the bottom of a card stretched to its
   row, so cards side by side had it at different heights (E, F low beside G, H) */
.nb-letter-card__top{font-size:var(--fs-xs);color:var(--nb-ink-3);margin-top:var(--s-1)}
/* the beginnings chips wrap as inline boxes with balanced lines, so the last chip ('Other' on J, P, B) never sits on a
   row alone (4+4+1 became 3+3+3, 9+1 5+5); the same number of rows. Browsers without text-wrap:balance wrap as before. */
.nb-chips.nb-prefix-grid{display:block;margin-top:var(--s-2);text-wrap:balance}
.nb-prefix-grid li{vertical-align:top}
/* a letter page's line under the letter bar down to its 'by beginning' chips */
.nb-jump{margin:var(--s-3) 0 0;font-size:var(--fs-sm)}
/* a prefix page's previous / next beginning above the chips at its end, one at each side */
.nb-prefix-step{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2) var(--s-4);margin:0 0 var(--s-2)}
.nb-prefix-step .nb-more{display:inline-flex;align-items:center;min-height:44px}
/* 'Jump to a page' on a beginning of several pages: each page's first and last name, 44 px rows, two columns from 600 px;
   the current page is marked like the pagination's */
.nb-page-ranges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;column-gap:var(--s-6)}
@media (min-width:600px){.nb-page-ranges{grid-template-columns:1fr 1fr}}
.nb-page-ranges a,.nb-page-ranges [aria-current]{display:flex;align-items:center;gap:var(--s-3);min-height:44px;padding:0 var(--s-2);border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:700;text-decoration:none}
.nb-page-ranges a:hover{background:var(--nb-bg-3)}
.nb-page-ranges [aria-current]{background:var(--nb-brand);color:#fff}
.nb-page-ranges__n{min-width:1.5em;text-align:right;font-variant-numeric:tabular-nums;color:var(--nb-ink-3)}
.nb-page-ranges [aria-current] .nb-page-ranges__n{color:inherit}
.nb-author{display:flex;gap:var(--s-4);align-items:flex-start;margin:var(--s-4) 0}
.nb-author img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none}
.nb-404__links{justify-content:center;margin-top:var(--s-6)}
/* in the 'Or start from a list' section (a 404 with 'Did you mean?') the chips start at the left like every section's */
.nb-section .nb-404__links{justify-content:flex-start;margin-top:0}
.nb-404__art{margin:var(--s-8) 0 0;text-align:center}
/* the inline SVG name tag (404.php), drawn in currentColor: full width on phones, at most the old PNG's 462x260 above */
.nb-404__tag{display:block;width:100%;max-width:462px;height:auto;margin:0 auto;color:var(--nb-brand)}
.nb-page--404 .nb-main,.nb-page--search .nb-main{text-align:center}
.nb-page--404 .nb-section,.nb-page--search .nb-section,.nb-page--search .nb-namelist{text-align:left}
.nb-page--404 .nb-search--hero,.nb-page--search .nb-search--hero{max-width:36rem;margin:var(--s-6) auto}
/* main spans the container here, so the measure-wide lede is centred under the h1 */
.nb-page--404 .nb-lede,.nb-page--search .nb-lede{margin-inline:auto}
/* 'Browse all … names' under the search results */
.nb-search__all{margin-top:var(--s-6);text-align:left}
.nb-debug{position:fixed;bottom:0;left:0;z-index:1000;padding:2px 6px;font-size:10px;line-height:1.3;color:var(--nb-down);background:var(--nb-bg-2);border-top-right-radius:var(--r-sm)}

/* ads */
.ad{position:relative;margin:var(--section-gap) auto;padding:20px 0 8px;text-align:center;background:var(--nb-bg-2);border-radius:var(--r-sm);overflow:hidden}
.ad::before{content:"Advertisement";position:absolute;top:4px;left:0;right:0;font-size:11px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--nb-ink-3)}
/* top-aligned, so the unit adds no descender gap under itself and the box is exactly its reserved min-height */
.ad ins.adsbygoogle{display:inline-block;vertical-align:top}
.ad--leader ins{width:320px;height:100px}.ad--leader{min-height:128px}
.ad--rect ins{width:320px;height:100px}.ad--rect{min-height:128px}
.ad--sky ins{width:300px;height:600px}.ad--sky{min-height:628px}
@media (min-width:800px){.ad--rect ins{width:336px;height:280px}.ad--rect{min-height:308px}}
/* 728x90 needs a >= 740 px column: single 800-1023, two-column >= 1160 */
@media (min-width:800px) and (max-width:1023.98px),(min-width:1160px){
.ad--leader ins{width:728px;height:90px}.ad--leader{min-height:118px}}
@media (min-width:1024px) and (max-width:1159.98px){
.nb-layout--single .ad--leader ins{width:728px;height:90px}.nb-layout--single .ad--leader{min-height:118px}}
/* under 352 px the 320 px units are wider than the column and lost their right edge (AdChoices): ad rows take the gutters,
   so a 320 px screen gives a 320 px frame. The second selector outranks the year page's own .nb-year-lists__ad .ad margin. */
@media (max-width:351.98px){
.ad,.nb-main .nb-year-lists__ad .ad{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));border-radius:0}}
/* unfilled (AdSense data-ad-status, or the script never ran): the slot goes, so the page closes up. A pending slot keeps
   its reserved height, so a fill does not shift the page. A grid item that only holds the ad goes with it (no empty row + gap). */
.ad.is-empty,.nb-card-grid__ad:has(>.ad.is-empty),.nb-letter-grid__ad:has(>.ad.is-empty),.nb-year-lists__ad:has(>.ad.is-empty){display:none}
/* without JavaScript AdSense cannot fill: no empty boxes (the units stay in the markup) */
.no-js .ad,.no-js .nb-card-grid__ad,.no-js .nb-letter-grid__ad,.no-js .nb-year-lists__ad{display:none}

/* ---- additions 2026-10-24: classes emitted by the page modules that had no rule yet ---- */
.nb-say__text{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s-2);font-size:var(--fs-body)}
.nb-say__text strong{font-weight:700}
.nb-details__label{flex:1 1 auto}
.nb-article__head{margin-bottom:var(--s-6)}
.nb-article__head h1{margin-bottom:var(--s-2)}
.nb-author__text{flex:1 1 auto;min-width:0}
.nb-author__role{margin:0 0 var(--s-2);color:var(--nb-ink-3);font-size:var(--fs-sm)}
/* min-height holds the Google button's height before its iframe arrives, so the line under it does not jump */
.nb-gsi{margin:var(--s-4) 0;display:flex;justify-content:center;min-height:44px}
.nb-pagination--years{margin:var(--s-4) 0}
.nb-pagination--years ul{justify-content:flex-start}
/* the year pager repeated at the end of a year page, set apart from the chips above it */
.nb-pagination--years.nb-pagination--end{margin-top:var(--section-gap)}
.nb-trend{white-space:nowrap}

/* ---- review fixes 2026-10-24 ---- */
.nb-funfact .nb-eyebrow{color:var(--nb-ink-2)}
@media (max-width:799.98px){.ad--rect-250 ins{width:300px;height:250px}.ad--rect-250{min-height:278px}}

/* touch: one-line text links (15-20 px tall) get a taller hit area without moving anything. Crumbs fill their 40 px row;
   the others get an invisible ::after 10 px over and under. Links set in running text (about box, chart captions) sit
   about 9 px from their neighbour, so they do not grow sideways. */
@media (pointer:coarse){
.nb-crumbs a{display:inline-flex;align-items:center;min-height:40px}
.nb-crumbs ol.is-wrap a{min-height:32px}
.nb-about a,.nb-chart figcaption a,.nb-table__foot a,.nb-more{position:relative}
.nb-about a::after,.nb-chart figcaption a::after,.nb-table__foot a::after,.nb-more::after{content:"";position:absolute;inset:-10px -4px}
.nb-about a::after,.nb-chart figcaption a::after{inset:-10px 0}
/* a foot whose links stack (trending 'Both' pages under 375 px) keeps them 20 px apart, so each one's area ends where the
   next one's starts: 22 px apart, the second link took the lower half of the first */
.nb-table__foot{row-gap:20px}
}