/* Homepage. Layout follows Kai's mockup (help1/image/NameMochi Baby Name Trends Homepage.png): soft pastel panels, per-name artwork on the cards,
   a US map for the state panel, icon headings. Text colors are chosen for 4.5:1 contrast. */
.home{padding:8px 0 72px;display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
.home h1,.home h2,.home h3{font-family:'Playfair Display',serif;color:#0d176b}
.home a{color:inherit}
.home .muted{color:#5f6578;font-size:13px}

/* ---- header search (same behaviour as the hero search) ---- */
.header-inner{display:flex;align-items:center;gap:8px}
.hdr-search{margin-left:auto;display:flex;align-items:center;background:#fff;border:1px solid #7656f633;border-radius:999px;padding:3px 4px 3px 12px;min-width:0}
.hdr-search input{border:0;outline:0;background:none;font:inherit;font-size:14px;width:160px;min-width:0}
.hdr-search button{background:#ece6ff;color:#4b2fc0;border:0;border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}

/* ---- hero ---- */
.home-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:12px;align-items:center;padding:14px 0 4px}
.home-hero::before{content:'';position:absolute;inset:-30px -10px -10px 35%;background:radial-gradient(ellipse at 60% 40%,#f8d9ea66,transparent 62%),radial-gradient(ellipse at 85% 70%,#d9e4ff66,transparent 60%);pointer-events:none;z-index:0}
.hero-copy,.hero-img{position:relative;z-index:1}
.home-hero h1{font-size:clamp(40px,6vw,64px);line-height:1.04;margin:8px 0 14px;font-weight:700}
.home .eyebrow{font-size:12px;letter-spacing:.14em;color:#5b3fd0;font-weight:700}
.home .sub{font-size:17px;line-height:1.55;margin:0 0 16px}
.home-search{display:flex;gap:8px;background:#fff;border:1px solid #7656f633;border-radius:999px;padding:6px;max-width:500px;box-shadow:0 6px 22px #7656f61a}
.home-search input{flex:1;border:0;outline:0;background:none;padding:8px 14px;font:inherit;min-width:0}
.home-search button,.btn{background:#6a46e5;color:#fff;border:0;border-radius:999px;padding:11px 24px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
.msg{font-size:14px;color:#a5401f;min-height:20px;margin:6px 0 0}
.popular{font-size:14px;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.popular a{background:#7656f61a;color:#5b3fd0;border-radius:999px;padding:5px 14px;text-decoration:none}
.hero-img img{width:100%;height:auto;display:block;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 64% 68% at 50% 52%,#000 64%,transparent 100%);mask-image:radial-gradient(ellipse 64% 68% at 50% 52%,#000 64%,transparent 100%)}

/* ---- panels ---- */
.home-sec{background:#fffdfbcc;border:1px solid #7656f61f;border-radius:24px;padding:20px 24px;box-shadow:0 10px 30px #7656f60d}
.sec-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.sec-head .ico{flex:none;width:34px;height:34px;border-radius:12px;background:#efe9ff;color:#5b3fd0;display:grid;place-items:center}
.sec-head .ico svg{width:20px;height:20px}
.sec-head h2{font-size:24px;margin:0 0 3px}.sec-head p{margin:0;color:#4a5170;font-size:15px}
.sec-head .more{margin-left:auto;align-self:center;font-size:13px;font-weight:600;color:#4b2fc0;text-decoration:none;white-space:nowrap}

/* ---- names in motion: one card per page, with that name's own artwork ---- */
.motion-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.motion-card{position:relative;overflow:hidden;border:1px solid #7656f61f;border-radius:18px;padding:14px 14px 0;text-decoration:none;color:inherit;display:block;background:#fffdfb;min-height:176px}
a.motion-card:hover{box-shadow:0 10px 26px #7656f62b}
.motion-card .mc-art{position:absolute;top:0;right:0;width:62%;height:78%;object-fit:cover;object-position:center;opacity:.92;-webkit-mask-image:linear-gradient(90deg,transparent,#000 48%),linear-gradient(180deg,#000 62%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 48%),linear-gradient(180deg,#000 62%,transparent);mask-composite:intersect;pointer-events:none}
.motion-card>*:not(.mc-art){position:relative;z-index:1}
.motion-card h3{font-size:21px;margin:0}.motion-card p{margin:3px 0}.motion-card .rank{font-size:22px;font-weight:700;margin-top:4px}
.motion-card small{font-weight:400;font-size:12px;color:#5f6578}
.chip{display:inline-block;font-size:12px;border-radius:999px;padding:3px 11px;font-weight:600;margin-top:4px}
.chip.rising{background:#2f8a5722;color:#1f6a40}.chip.cooling{background:#c0502d22;color:#a5401f}.chip.steady{background:#7656f622;color:#5b3fd0}
.up{color:#1f6a40;font-weight:600}.down{color:#a5401f;font-weight:600}.flat{color:#656b7e}
.spark{width:100%;height:42px;margin-top:6px;display:block}

/* ---- today's story ---- */
.story-split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}
.today-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:18px;align-items:center;margin-top:6px}
.today-right .btn{margin-top:8px}
.today-art{position:relative}
.today-art img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:18px;-webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 78% 82% at 50% 50%,#000 60%,transparent 100%)}
.story-title{font-size:30px;margin:2px 0 4px}
.today-numbers{margin:6px 0 0}.today-numbers .big{font-family:'Playfair Display',serif;font-size:38px;font-weight:700;color:#5b3fd0}
.today-chart svg{width:100%;height:auto;display:block}.grid{stroke:#7656f61a}.tick{font-size:11px;fill:#5f6578}
.today .btn{margin-top:8px}
.why .ticks{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:11px}
.why .ticks li{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.why .ticks li::before{content:'✓';color:#5b3fd0;font-weight:700;flex:none}
.why .kind{margin-left:6px}

/* ---- find a name that fits ---- */
.home-finder{background:linear-gradient(120deg,#f1e8ff,#e8dcff 55%,#f3ecff);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 18px;align-items:center}
.home-finder .sec-head{grid-column:1/-1;margin-bottom:0}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.pills a{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#26304f;text-decoration:none;border-radius:999px;padding:7px 14px;font-size:14px;border:1px solid #7656f633}
.pills a svg{width:15px;height:15px;color:#6a46e5}
.home-finder .btn{white-space:nowrap}

/* ---- names by the numbers ---- */
.num-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.home .panel{border:1px solid #7656f61f;border-radius:18px;padding:16px;background:#fffdfb}
.home .panel h3{font-size:17px;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.home .panel h3 svg{width:20px;height:20px;color:#c08a2e;flex:none}
.home .panel h3 small{font-family:'DM Sans',sans-serif;font-weight:400;font-size:12px;color:#5f6578}
.home .panel ol{margin:0;padding:0;list-style:none;display:grid;gap:7px;counter-reset:n}
.home .panel ol li{display:flex;gap:10px;align-items:center;counter-increment:n}
.home .panel ol li::before{content:counter(n);flex:none;width:22px;height:22px;border-radius:50%;background:#efe9ff;color:#4b2fc0;font-size:12px;font-weight:700;display:grid;place-items:center}
.home .panel ol li .muted,.home .panel ol li .up{margin-left:auto}
.map-panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:8px;align-items:center}
.us-mini svg{width:100%;height:auto;display:block}
.us-mini path{fill:#e6defb;stroke:#fff;stroke-width:1.2}
.us-mini path.hot{fill:#6a46e5}.us-mini path.hot2{fill:#8a6df0}.us-mini path.hot3{fill:#a995f5}
.statelist{list-style:none;padding:0;margin:0;display:grid;gap:7px}.statelist li{font-size:14px;line-height:1.3}.statelist .muted{display:block}

/* ---- data stories ---- */
.stories-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,340px));gap:14px}
.story-card{text-decoration:none;color:inherit;display:block;border:1px solid #7656f61f;border-radius:18px;overflow:hidden;background:#fffdfb}
.story-card img{width:100%;height:auto;display:block}.story-card h3{font-size:20px;margin:12px 14px 4px}.story-card p{margin:0 14px 14px;color:#4a5170;font-size:14px}

/* ---- popular names + maybe you're looking for ---- */
.split2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px}
.home .story-table th{font-size:13px;font-weight:500;color:#454f70;text-transform:none;letter-spacing:0}.home .story-table td{font-size:15px}
.look-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.look{border:1px solid #7656f61f;border-radius:16px;padding:12px 14px;background:linear-gradient(135deg,#fffdfb,#f6f0ff)}
.look h3{font-size:16px;margin:0 0 8px}.look .links{display:flex;flex-wrap:wrap;gap:8px}
.look a{background:#fff;color:#5b3fd0;border:1px solid #7656f62b;border-radius:999px;padding:5px 12px;text-decoration:none;font-size:14px}
.footer-inner small{color:#5f6578}

@media(max-width:1100px){.motion-row{grid-template-columns:repeat(3,minmax(0,1fr))}.num-row{grid-template-columns:repeat(2,minmax(0,1fr))}.num-row .map-card{grid-column:1/-1}}
@media(max-width:860px){.home-hero,.story-split,.split2,.today-grid{grid-template-columns:minmax(0,1fr)}.motion-row{grid-template-columns:repeat(2,minmax(0,1fr))}.home-finder{grid-template-columns:minmax(0,1fr)}.hdr-search input{width:110px}}
@media(max-width:600px){.home-search{max-width:none}.sec-head h2{font-size:21px}.story-title{font-size:25px}.num-row{grid-template-columns:minmax(0,1fr)}.look-grid{grid-template-columns:minmax(0,1fr)}.hdr-search{display:none}.home-sec{padding:16px 16px}.map-panel{grid-template-columns:minmax(0,1fr)}.motion-card .mc-art{width:56%}.home .story-table th:nth-child(5),.home .story-table td:nth-child(5){display:none}}

.home a.btn,.home .home-search button{color:#fff}
.home .muted{color:#4f566b;opacity:1}
.sec-head .more{display:inline-block;padding:6px 2px}
/* phone: the section link drops under the title, and the card art stays behind a quieter fade so the text always wins */
@media(max-width:600px){.sec-head{flex-wrap:wrap}.sec-head .more{margin-left:46px;flex-basis:100%;align-self:flex-start;padding:2px}.motion-card .mc-art{width:46%;opacity:.8}.motion-card p{max-width:62%}.motion-card .rank{max-width:none}}