/* MyGall Theme - Master Stylesheet (concatenated) */

/* === tokens.css === */
/* Design Tokens */

:root {
    /* Colors - Core */
    --bg: #FAF7F2;
    --bg-card: #FFFFFF;
    --bg-warm: #F5EDE3;
    --text: #1A1614;
    --text-secondary: #6B5E54;
    --text-tertiary: #7A6B62;
    --accent: #A84A2F;
    --accent-light: #E8A48E;
    --accent-bg: #FDF0EB;
    --border: #E8DDD3;
    --border-light: #F0E8DE;

    /* Colors - Gender (sparingly) */
    --girl-pink: #FF69B4;
    --boy-blue: #4A90C4;
    --unisex-sage: #6E9E5C;

    /* Typography Scale */
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

    --text-h1: clamp(2.8rem, 8vw, 4.8rem);
    --text-h2: 1.75rem;
    --text-h3: 1.125rem;
    --text-body: 1rem;
    --text-small: 0.8125rem;
    --text-caption: 0.6875rem;

    --leading-tight: 1.2;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    /* Spacing (4px base) */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */

    /* Border Radius */
    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-lg: 8px;
    --radius-pill: 16px;

    /* Shadows */
    --shadow-card: 0 1px 3px rgba(26, 22, 20, 0.04), 0 1px 2px rgba(26, 22, 20, 0.06);
    --shadow-elevated: 0 4px 12px rgba(26, 22, 20, 0.08), 0 2px 4px rgba(26, 22, 20, 0.04);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    /* Z-index */
    --z-header: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;

    /* Layout */
    --container-max: 1200px;
    --sidebar-width: 300px;
    --header-height: 72px;
}

/* Breakpoints (reference, not usable as CSS vars):
   --bp-mobile: 767px
   --bp-tablet: 1024px
*/


/* === reset.css === */
/* Reset */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-normal);
    color: var(--text);
    background-color: var(--bg);
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

a {
    color: inherit;
    text-decoration: none;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    overflow-wrap: break-word;
}

p {
    overflow-wrap: break-word;
}

table {
    border-collapse: collapse;
}

/* Visually hidden (screen-reader only) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* === typography.css === */
/* Typography */

@font-face {
    font-family: 'Instrument Serif';
    src: url('../fonts/instrument-serif-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    /* font-synthesis: none prevents browser from generating a synthetic bold/italic
       variant which can cause micro layout shift. Only one weight/style is available. */
    font-synthesis: none;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans-variable.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    font-synthesis: none;
}

/* Headings - all uppercase via CSS */
h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

h1 {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
    color: var(--text);
}

h2 {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
    color: var(--text);
    margin-bottom: var(--space-lg);
}

h3 {
    font-family: var(--font-body);
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--text);
    margin-bottom: var(--space-sm);
}

/* Body text */
p {
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

p:last-child {
    margin-bottom: 0;
}

/* Links - no blue underline */
.content-area a {
    color: var(--accent-dark);
    transition: color var(--transition-fast);
}

.content-area a:hover {
    color: var(--text);
}

/* Small text utilities */
.text-sm {
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
}

.text-caption {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
}

.text-label {
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

/* Blockquote */
blockquote {
    padding-left: var(--space-lg);
    border-left: 3px solid var(--accent);
    color: var(--text-secondary);
    font-style: italic;
    margin: var(--space-xl) 0;
}

/* Lists in content */
.content-area ul,
.content-area ol {
    padding-left: var(--space-lg);
    margin-bottom: var(--space-md);
}

.content-area li {
    margin-bottom: var(--space-xs);
    color: var(--text-secondary);
}

.content-area ol {
    counter-reset: list-counter;
    list-style: none;
    padding-left: 0;
}

.content-area ol li {
    counter-increment: list-counter;
    padding-left: var(--space-lg);
    position: relative;
}

.content-area ol li::before {
    content: counter(list-counter);
    position: absolute;
    left: 0;
    font-weight: var(--weight-semibold);
    color: var(--accent);
}

/* Strong / emphasis */
strong, b {
    font-weight: var(--weight-semibold);
    color: var(--text);
}


/* === layout.css === */
/* Layout - Mobile First */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

/* Grid utility - mobile first: single column default */
.grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.grid--auto {
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

/* Sidebar layout - mobile first: stacked */
.sidebar-layout {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: 1fr;
}

.sidebar-layout__main {
    min-width: 0;
    order: 1;
}

.sidebar-layout__sidebar {
    order: 2;
}

@media (min-width: 1024px) {
    .sidebar-layout {
        grid-template-columns: 1fr var(--sidebar-width);
        gap: var(--space-2xl);
    }

    .sidebar-layout__sidebar {
        min-width: var(--sidebar-width);
        align-self: start;
        /* No sticky — sidebar scrolls with the page naturally */
    }
}

/* Stack - vertical spacing */
.stack > * + * {
    margin-top: var(--space-md);
}

.stack--lg > * + * {
    margin-top: var(--space-xl);
}

.stack--xl > * + * {
    margin-top: var(--space-2xl);
}

/* Cluster - horizontal flex */
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

/* Section spacing - mobile first */
.section {
    padding-block: var(--space-xl);
}

.section + .section {
    border-top: 1px solid var(--border-light);
}

@media (min-width: 768px) {
    .section {
        padding-block: var(--space-2xl);
    }
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    height: var(--header-height);
    display: flex;
    align-items: center;
}

/* WP admin bar compensation (logged-in only) */
.admin-bar .site-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}
@media (min-width: 1024px) {
    .admin-bar .sidebar-layout__sidebar {
        top: calc(32px + var(--header-height) + var(--space-lg));
    }
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.site-header__name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* Mobile menu toggle - visible by default, hidden on desktop */
.site-header__menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

@media (min-width: 768px) {
    .site-header__menu-toggle {
        display: none;
    }
}

/* Mobile menu */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--bg-card);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    padding: var(--space-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu.is-open {
    transform: translateX(0);
}

.mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
}

.mobile-menu__list {
    list-style: none;
    padding: 0;
}

.mobile-menu__list li {
    border-bottom: 1px solid var(--border-light);
}

.mobile-menu__list a {
    display: block;
    padding: var(--space-md) 0;
    font-size: var(--text-h3);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
}

/* Search modal */
.search-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--space-3xl);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.search-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.search-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 22, 20, 0.5);
}

.search-modal__content {
    position: relative;
    width: 90%;
    max-width: 560px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow-elevated);
}

.search-modal__close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-results {
    margin-top: var(--space-md);
}

.search-result {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.search-result:hover {
    background: var(--bg-warm);
}

.search-result__name {
    font-weight: var(--weight-semibold);
}

.search-result__meaning {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    margin-left: auto;
}

.search-no-results {
    padding: var(--space-md);
    color: var(--text-tertiary);
    text-align: center;
}

/* Autocomplete dropdown */
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-overlay);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
    margin-top: var(--space-xs);
}

.autocomplete-dropdown:empty,
.autocomplete-dropdown:not(.is-open) {
    display: none;
}

.autocomplete-dropdown.is-open {
    display: block;
}

.autocomplete-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: var(--text);
}

.autocomplete-item__meaning {
    font-size: var(--text-small);
    color: var(--text-tertiary);
    margin-left: auto;
}

.autocomplete-empty {
    padding: var(--space-md);
    color: var(--text-tertiary);
    font-size: var(--text-small);
    text-align: center;
}

.autocomplete-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--text-body);
    transition: background var(--transition-fast);
}

.autocomplete-item:hover {
    background: var(--bg-warm);
}

/* ─── Compare — premium redesign ─────────────────────────────────────────── */

/* Form */
.compare-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {
    .compare-form {
        grid-template-columns: 1fr 1fr;
    }
}

.compare-input-wrap .search-box__input {
    padding: var(--space-md) var(--space-lg);
    padding-left: var(--space-lg);
    font-size: 1.0625rem;
    height: 56px;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    background: var(--bg-card);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.compare-input-wrap .search-box__input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(168, 74, 47, 0.12);
    outline: none;
}

/* Submit button */
.compare-submit-btn {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: var(--space-xs);
    height: 52px;
    font-size: 1rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.03em;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--transition-fast), transform 80ms ease;
}

.compare-submit-btn:hover {
    background: #923f27;
}

.compare-submit-btn:active {
    transform: scale(0.99);
}

/* Status / error messages */
.compare-message {
    text-align: center;
    padding: var(--space-xl);
    color: var(--text-secondary);
    font-size: var(--text-body);
}

.compare-message--error {
    color: var(--accent);
}

/* Layout wrapper */
.compare-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* 3-col grid: col | VS | col */
.compare-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: start;
}

@media (min-width: 768px) {
    .compare-grid {
        grid-template-columns: 1fr 72px 1fr;
        align-items: stretch;
    }
}

/* VS separator */
.compare-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: var(--weight-regular);
    color: var(--accent);
    line-height: 1;
    padding: var(--space-sm) 0;
    order: -1; /* on mobile, VS sits between the two cols when stacked */
}

@media (min-width: 768px) {
    .compare-vs {
        order: unset;
        font-size: 2.75rem;
        padding: 0;
        /* vertical line on desktop */
        position: relative;
    }
    .compare-vs::before,
    .compare-vs::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 1px;
        background: var(--border);
    }
    .compare-vs::before { top: 0; bottom: calc(50% + 1.4em); }
    .compare-vs::after  { top: calc(50% + 1.4em); bottom: 0; }
}

/* Name columns */
.compare-col {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: left;
    position: relative;
    overflow: hidden;
}

/* Left border accent — warm for name1, cool for name2 */
.compare-col:first-child {
    border-left: 4px solid #C45D3E;
}

.compare-col:last-child {
    border-left: 4px solid #3E7EC4;
}

/* Subtle tinted top strip */
.compare-col:first-child::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #C45D3E 0%, transparent 100%);
    opacity: 0.25;
}

.compare-col:last-child::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #3E7EC4 0%, transparent 100%);
    opacity: 0.25;
}

.compare-col__header {
    margin-bottom: var(--space-lg);
}

.compare-col__name {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: var(--weight-regular);
    line-height: 1.1;
    margin: var(--space-xs) 0 var(--space-sm);
}

.compare-col__meaning {
    font-size: var(--text-small);
    color: var(--text-secondary);
    margin: 0 0 var(--space-sm);
    line-height: 1.5;
}

/* Stats row — 3 cards side by side */
.compare-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

/* Override stat-card inside compare to be more prominent */
.compare-stats .stat-card {
    background: var(--accent-bg);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-xs);
    text-align: center;
}

.compare-col:last-child .compare-stats .stat-card {
    background: #EBF3FD;
}

.compare-stats .stat-card__value {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: var(--weight-regular);
    line-height: 1;
    color: #C45D3E;
}

.compare-col:last-child .compare-stats .stat-card__value {
    color: #3E7EC4;
}

.compare-stats .stat-card__label {
    font-size: 0.625rem;
    letter-spacing: 0.07em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-top: 4px;
}

/* Name link */
.compare-name-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.compare-name-link:hover {
    color: var(--accent);
}

/* CTA button */
.compare-col__cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: var(--space-sm) var(--space-md);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast);
    background: transparent;
    cursor: pointer;
}

.compare-col:first-child .compare-col__cta:hover {
    border-color: #C45D3E;
    color: #C45D3E;
}

.compare-col:last-child .compare-col__cta:hover {
    border-color: #3E7EC4;
    color: #3E7EC4;
}

/* Chart wrapper */
.compare-chart-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-md) var(--space-md);
    overflow: hidden;
}

.compare-chart {
    width: 100%;
    height: 300px;
}

/* Mobile: stack columns, VS between them */
@media (max-width: 767px) {
    .compare-vs {
        font-size: 1.75rem;
        padding: var(--space-xs) 0;
        color: var(--accent);
    }
    .compare-grid {
        /* name1 | vs | name2 order on mobile */
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }
    .compare-vs {
        order: 1;
    }
    .compare-col:first-child { order: 0; }
    .compare-col:last-child  { order: 2; }
}

/* Gender badges */
.gender-badge {
    display: inline-block;
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-xs);
}

.gender-badge--girl {
    background: #FDF0EB;
    color: #A84A2F;
}

.gender-badge--boy {
    background: #EBF3FD;
    color: #2F64A8;
}

.gender-badge--unisex {
    background: var(--bg-warm);
    color: var(--text-secondary);
}

/* ── Footer (mega/corporate) ───────────────────────────────────────── */

.site-footer {
    background: var(--text);
    color: var(--bg-warm);
    margin-top: var(--space-3xl);
}

.site-footer a {
    color: var(--bg-warm);
    transition: color var(--transition-fast);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--accent-light);
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Top CTA strip */
.site-footer__newsletter {
    background: linear-gradient(135deg, var(--accent) 0%, #a04733 100%);
    padding: var(--space-2xl) 0;
    color: #FFFFFF;
}

.footer-newsletter__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    align-items: flex-start;
}

@media (min-width: 768px) {
    .footer-newsletter__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2xl);
    }
}

.footer-newsletter__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: #FFFFFF;
    margin: 0 0 8px;
    text-transform: none;
    line-height: 1.15;
    max-width: 540px;
}

.footer-newsletter__sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
    margin: 0;
    max-width: 540px;
}

.footer-newsletter__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #FFFFFF;
    color: #1A1614 !important;
    border-radius: 16px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
    border: 2px solid #FFFFFF;
    letter-spacing: 0.01em;
}

.footer-newsletter__btn svg {
    stroke: #1A1614;
    transition: stroke var(--transition-fast);
}

.footer-newsletter__btn:hover {
    background: transparent;
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.footer-newsletter__btn:hover svg {
    stroke: #FFFFFF;
}

/* Main mega columns */
.site-footer__main {
    padding: var(--space-2xl) 0 var(--space-xl);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
    }
}

.footer-col { min-width: 0; }

.footer-col--brand { grid-column: 1 / -1; }

@media (min-width: 1024px) {
    .footer-col--brand { grid-column: auto; }
}

.footer-logo { display: inline-block; margin-bottom: var(--space-md); }

.footer-logo__name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: #FFFFFF;
}

.footer-tagline {
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: var(--space-md);
    max-width: 320px;
}

.footer-stats {
    display: flex;
    gap: var(--space-lg);
}

.footer-stat { display: flex; flex-direction: column; }

.footer-stat__num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--accent-light);
    font-weight: var(--weight-semibold);
    line-height: 1.1;
}

.footer-stat__label {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

.footer-col__title {
    font-family: var(--font-display);
    font-size: 0.875rem;
    color: #FFFFFF;
    margin: 0 0 var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--weight-semibold);
}

.footer-col__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-col__list a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition-fast);
}

.footer-col__list a:hover { color: var(--accent-light); }

.footer-col__rank {
    font-family: var(--font-display);
    color: var(--accent-light);
    font-size: 0.75rem;
    min-width: 32px;
    flex-shrink: 0;
}

.footer-col__count {
    margin-left: auto;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
}

.footer-col__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-md);
    font-size: 0.75rem;
    color: var(--accent-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--weight-semibold);
    transition: gap var(--transition-fast);
}

.footer-col__more:hover {
    color: #FFFFFF;
    gap: 10px;
}

/* Bottom bar */
.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-md) 0;
}

.footer-bottom__inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}

@media (min-width: 768px) {
    .footer-bottom__inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-md);
    }
}

.footer-bottom__copy,
.footer-bottom__sources,
.footer-bottom__disclaimer { margin: 0; }

.footer-bottom__sources strong {
    color: rgba(255, 255, 255, 0.65);
    font-weight: var(--weight-medium);
}

/* Visibility utilities */
.hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: initial;
    }
    .hide-desktop {
        display: none;
    }
}


/* === components.css === */
/* Components */

/* Card */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-lg);
    transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-elevated);
    border-color: var(--accent-light);
}

.card--link {
    display: block;
    cursor: pointer;
}

/* Tag / Pill */
.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-pill);
    background: var(--bg-warm);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.tag:hover {
    background: var(--accent-bg);
    color: var(--accent);
}

.tag--girl { background: rgba(232, 180, 184, 0.2); color: #9E6B70; }
.tag--boy { background: rgba(137, 176, 208, 0.2); color: #5A7B96; }
.tag--unisex { background: rgba(184, 201, 163, 0.2); color: #6D7F5A; }
.tag--neutral { background: var(--border-light); color: var(--text-secondary); cursor: default; }
.tag--neutral:hover { background: var(--border-light); color: var(--text-secondary); }
.tag--meaning { background: var(--accent-bg); color: var(--accent); cursor: default; }
.tag--meaning:hover { background: var(--accent-bg); color: var(--accent); }

/* Button */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-pill);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    transition: all var(--transition-fast);
    min-height: 44px;
}

.btn--primary {
    background: var(--accent);
    color: #FFFFFF;
}

.btn--primary:hover {
    background: #A84D33;
}

.btn--outline {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
}

.btn--outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ─── Ad Slots ───────────────────────────────────────────────────────────── */

/* Hidden — truly zero footprint */
.ad-slot--hidden {
    display: none !important;
    margin: 0;
    padding: 0;
    height: 0;
}

/* Live container — neutral, zero layout shift */
.ad-slot {
    display: block;
    overflow: hidden;
    text-align: center;
    /* Reserve space to prevent CLS */
}

/* ── Size reservations by position ── */
.ad-slot--in-content-1,
.ad-slot--in-content-2,
.ad-slot--blog-in-content {
    min-height: 250px;
    margin-block: var(--space-xl);
}

.ad-slot--after-chart,
.ad-slot--hub-top {
    min-height: 90px;
    margin-block: var(--space-xl);
}

.ad-slot--sidebar-top {
    display: none;
}

.ad-slot--sidebar-sticky {
    display: none;
}

@media (min-width: 1024px) {
    .ad-slot--sidebar-top {
        display: block;
        min-height: 250px;
        max-width: 100%;
        overflow: hidden;
        margin-bottom: var(--space-lg);
    }

    .ad-slot--sidebar-sticky {
        display: block;
        min-height: 600px;
        max-width: 100%;
        overflow: hidden;
        position: sticky;
        /* Account for sticky header so the ad unit doesn't hide beneath it */
        top: calc(var(--header-height) + var(--space-lg));
    }
}

.ad-slot--footer-anchor {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 200;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Branded preview placeholder ── */
.ad-slot--preview {
    position: relative;
    overflow: hidden;
    border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: var(--radius-md);
    background:
        repeating-linear-gradient(
            -45deg,
            color-mix(in srgb, var(--accent) 5%, transparent) 0px,
            color-mix(in srgb, var(--accent) 5%, transparent) 1px,
            transparent 1px,
            transparent 10px
        ),
        var(--bg-subtle, #faf9f7);
}

/* "MYGALL.NET" watermark — absolute, truly centered, no flex conflict */
.ad-slot--preview::after {
    content: 'MYGALL.NET';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: color-mix(in srgb, var(--accent) 18%, transparent);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

/* Size label — centered with absolute positioning (reliable cross-browser) */
.ad-slot__label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: inline-block;
    padding: 4px 12px;
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.05em;
    font-family: var(--font-body);
    white-space: nowrap;
}

/* ── Mobile overrides for anchored footer ── */
@media (min-width: 641px) {
    .ad-slot--footer-anchor {
        height: 90px;
    }
    .ad-slot--in-content-1,
    .ad-slot--in-content-2,
    .ad-slot--blog-in-content {
        min-height: 280px;
    }
    .ad-slot--after-chart,
    .ad-slot--hub-top {
        min-height: 90px;
    }
}

/* Monetization native section */
.monetization-native {
    margin-block: var(--space-2xl);
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-small);
    color: var(--text-tertiary);
    padding-block: var(--space-md);
}

.breadcrumb__separator {
    color: var(--border);
}

.breadcrumb a {
    color: var(--text-tertiary);
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--accent);
}

.breadcrumb__current {
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
}

/* Primary navigation */
.nav-primary {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.nav-primary a {
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
    padding: var(--space-sm) 0;
}

.nav-primary a:hover,
.nav-primary a[aria-current="page"] {
    color: var(--accent);
}

@media (max-width: 767px) {
    .nav-primary {
        display: none;
    }
}

/* Search box */
.search-box {
    position: relative;
    max-width: 480px;
    width: 100%;
}

.search-box__input {
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    padding-left: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    font-size: var(--text-body);
    transition: border-color var(--transition-fast);
}

.search-box__input:focus {
    border-color: var(--accent);
    outline: none;
}

.search-box__icon {
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
}

/* Stat card */
.stat-card {
    text-align: center;
    padding: var(--space-md);
}

.stat-card__value {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    color: var(--accent);
    line-height: var(--leading-tight);
}

.stat-card__label {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-xs);
}

/* Name grid */
.name-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-md);
}

/* FAQ accordion */
.faq-item {
    border-bottom: 1px solid var(--border-light);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 0;
    min-height: 44px;
    touch-action: manipulation;
    cursor: pointer;
    font-weight: var(--weight-medium);
    color: var(--text);
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary .mygall-icon {
    transition: transform var(--transition-normal);
    flex-shrink: 0;
}

.faq-item[open] summary .mygall-icon {
    transform: rotate(180deg);
}

.faq-item__answer {
    padding-bottom: var(--space-lg);
    color: var(--text-secondary);
}

/* State grid */
.state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: var(--space-xs);
}

.state-grid__item {
    text-align: center;
    padding: var(--space-xs);
    background: var(--bg-warm);
    border-radius: var(--radius-sm);
    font-size: var(--text-caption);
}

.state-grid__abbr {
    font-weight: var(--weight-semibold);
    color: var(--text);
    display: block;
}

.state-grid__rank {
    color: var(--text-tertiary);
}

/* Variant table */
.variant-table {
    width: 100%;
}

.variant-table th {
    text-align: left;
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border);
}

.variant-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
}

.variant-table a {
    color: var(--accent);
}

/* Author byline */
.author-byline {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-warm);
    border-radius: var(--radius-md);
    font-size: var(--text-small);
    color: var(--text-secondary);
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding-block: var(--space-2xl);
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    transition: all var(--transition-fast);
}

.pagination a:hover {
    background: var(--accent-bg);
    color: var(--accent);
}

.pagination .current {
    background: var(--accent);
    color: #FFFFFF;
}

/* ── Language Switcher ─────────────────────────────────────────────────────── */

.lang-switcher {
    position: relative;
}

.lang-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    min-height: 44px;
    touch-action: manipulation;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: transparent;
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--text);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
}

.lang-switcher__toggle:hover {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.lang-switcher__flag {
    font-size: 1rem;
    line-height: 1;
}

.lang-switcher__code {
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
}

.lang-switcher__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(26,22,20,0.12);
    z-index: 200;
    overflow: hidden;
    padding: 4px 0;
}

.lang-switcher__dropdown.is-open {
    display: block;
}

.lang-switcher__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: var(--text-small);
    color: var(--text);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.lang-switcher__option:hover {
    background: var(--bg-warm);
}

.lang-switcher__option.is-active {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: var(--weight-medium);
}

.lang-switcher__option-flag {
    font-size: 1rem;
    flex-shrink: 0;
}

.lang-switcher__option-name {
    flex: 1;
}

.lang-switcher__option .lucide {
    flex-shrink: 0;
    color: var(--accent);
}

/* Gender dot */
.gender-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.gender-dot--girl { background: var(--girl-pink); }
.gender-dot--boy { background: var(--boy-blue); }
.gender-dot--unisex { background: var(--unisex-sage); }

/* Letter bar */
.letter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding-block: var(--space-md);
}

@media (max-width: 767px) {
    .letter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: var(--space-sm);
    }
    .letter-bar::-webkit-scrollbar { display: none; }
}

.letter-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
    border-radius: var(--radius-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.letter-bar a:hover {
    background: var(--accent-bg);
    color: var(--accent);
}

.letter-bar a.active {
    background: var(--accent);
    color: #FFFFFF;
}

.letter-bar a.disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

/* ─── State pages ───────────────────────────────────────────────────────────── */

/* ── Social Share Bar ──────────────────────────────────────────────────────── */

.name-share {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    margin: var(--space-lg) 0;
}

.name-share__label {
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    white-space: nowrap;
    margin-right: 4px;
}

.name-share__buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.name-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    min-height: 36px;
    touch-action: manipulation;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--share-color) 30%, transparent);
    background: color-mix(in srgb, var(--share-color) 8%, transparent);
    color: var(--share-color);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    cursor: pointer;
    white-space: nowrap;
}

.name-share__btn:hover {
    background: color-mix(in srgb, var(--share-color) 15%, transparent);
    border-color: color-mix(in srgb, var(--share-color) 50%, transparent);
    transform: translateY(-1px);
}

.name-share__btn:active {
    transform: translateY(0);
}

.name-share__btn.is-copied {
    background: color-mix(in srgb, var(--color-success, #22c55e) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-success, #22c55e) 40%, transparent);
    color: var(--color-success, #22c55e);
}

.name-share__btn svg,
.name-share__btn .mygall-icon {
    flex-shrink: 0;
}

.name-share__btn-label {
    font-size: var(--text-small);
}

@media (max-width: 480px) {
    .name-share__btn-label { display: none; }
    .name-share__btn { padding: 7px 10px; min-width: 36px; justify-content: center; }
}

/* Gender tabs */
.state-tabs {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-xl);
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 0;
}

.state-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    min-height: 44px;
    touch-action: manipulation;
    font-weight: var(--weight-medium);
    font-size: 0.9375rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.state-tab:hover {
    color: var(--accent);
}

.state-tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: var(--weight-semibold);
}

/* Ranked name card */
.state-name-card {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    text-decoration: none;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
    margin-bottom: var(--space-xs);
}

.state-name-card:hover {
    box-shadow: var(--shadow-elevated);
    border-color: var(--accent-light);
}

.state-name-card__rank {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: var(--weight-regular);
    color: var(--accent);
    text-align: right;
    line-height: 1;
    min-width: 2ch;
}

/* State regions grid — by-state section on popular hub */
.state-regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-xl);
}

.state-region__label {
    font-size: 0.6875rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    margin: 0 0 var(--space-md);
}

.state-region__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.state-region__list a {
    display: block;
    padding: 6px 8px;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.state-region__list a:hover {
    background: var(--accent-bg);
    color: var(--accent);
}

/* Skip to content */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    z-index: var(--z-modal);
    padding: var(--space-sm) var(--space-md);
    background: var(--accent);
    color: #FFFFFF;
    border-radius: var(--radius-sm);
}

.skip-link:focus {
    top: var(--space-sm);
}

/* ── State Page — BEM block ─────────────────────────────────────────────────── */

/* Hero stats row */
.state-page__hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

@media (min-width: 640px) {
    .state-page__hero-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.state-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.state-stat-card:hover {
    box-shadow: var(--shadow-card);
    border-color: var(--accent-light);
}

.state-stat-card__value {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    color: var(--accent);
    line-height: var(--leading-tight);
    display: block;
    text-decoration: none;
}

.state-stat-card__value:hover {
    text-decoration: underline;
}

.state-stat-card__label {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: var(--space-xs);
    display: block;
}

/* Section dividers */
.state-page__section {
    margin-top: var(--space-3xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--border-light);
}

.state-page__section-title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 1.625rem);
    font-weight: var(--weight-regular);
    margin: 0 0 var(--space-xl);
    color: var(--text);
}

/* Names list — rank group dividers */
.state-names-list {
    margin-top: var(--space-xl);
}

.state-rank-group {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-xl) 0 var(--space-md);
    color: var(--text-tertiary);
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--weight-semibold);
}

.state-rank-group::before,
.state-rank-group::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

/* Top 3 name cards — highlighted */
.state-name-card--top3 {
    border-color: var(--accent-light);
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--accent-bg) 100%);
}

.state-name-card--top3 .state-name-card__rank {
    font-size: 1.375rem;
    font-weight: var(--weight-semibold);
}

/* Name card with prominent state rank badge */
.state-name-card__national {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* National comparison — insight strip */
.state-comparison {
    margin-top: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.state-comparison__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-warm);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent-light);
    font-size: 0.9375rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.state-comparison__name {
    font-weight: var(--weight-semibold);
    color: var(--accent);
    text-decoration: none;
}

.state-comparison__name:hover {
    text-decoration: underline;
}

.state-comparison__state-rank {
    font-weight: var(--weight-medium);
    color: var(--text);
}

.state-comparison__national {
    color: var(--text-tertiary);
    font-size: var(--text-small);
}

/* Insight callout box */
.state-page__insight {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: linear-gradient(135deg, var(--bg-warm) 0%, var(--bg-card) 100%);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
}

.state-page__insight-icon {
    flex-shrink: 0;
    color: var(--accent);
    margin-top: 2px;
}

.state-page__insight-text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.state-page__insight-text strong {
    color: var(--text);
}

/* Origin pills cluster */
.state-page__origins-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.state-page__origins-note {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-light);
}

.state-page__origins-note p {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 0.9375rem;
    margin-bottom: var(--space-md);
}

.state-page__origins-note p:last-child {
    margin-bottom: 0;
}

/* Nearby states — card grid */
.state-page__nearby-cluster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.state-page__nearby-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    text-decoration: none;
    text-align: center;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.state-page__nearby-link:hover {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent-light);
}

/* Cross-tab banner — shown before the names list */
.state-page__cross-tab {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-warm);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.state-page__cross-tab .mygall-icon {
    color: var(--accent);
    flex-shrink: 0;
}

.state-page__cross-tab a {
    color: var(--accent);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    margin-left: var(--space-xs);
}

.state-page__cross-tab a:hover {
    text-decoration: underline;
}

/* ── State thematic intro ── */

.state-page__intro {
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-3xl);
    padding-top: var(--space-xl);
    border-top: 2px solid var(--border-light);
}

.state-page__intro__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-lg);
}

.state-page__intro__body p {
    color: var(--text-primary);
    line-height: 1.8;
    font-size: 0.9375rem;
    margin-bottom: var(--space-md);
}

.state-page__intro__body p:first-child {
    font-size: 1.0625rem;
    line-height: 1.75;
}

.state-page__intro__body p:last-child {
    margin-bottom: 0;
}

.state-page__intro__body strong {
    font-weight: 600;
}

.state-page__intro__heading {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: var(--space-xl);
    line-height: 1.25;
}

.state-page__outro {
    margin-top: var(--space-3xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border-light);
    margin-bottom: var(--space-3xl);
}

.state-page__outro__body p {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 0.9375rem;
    margin-bottom: var(--space-md);
}

.state-page__outro__body p:last-child {
    margin-bottom: 0;
}

/* ── Two-column Girls / Boys layout ── */

.state-page__dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
    align-items: start;
}

@media (max-width: 640px) {
    .state-page__dual {
        grid-template-columns: 1fr;
    }
}

.state-page__col {
    min-width: 0;
}

.state-page__col-title {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--border-light);
}

.state-page__col-title--girl {
    color: var(--color-girl, #c45d3e);
    border-bottom-color: var(--color-girl, #c45d3e);
}

.state-page__col-title--boy {
    color: var(--color-boy, #5b7fa6);
    border-bottom-color: var(--color-boy, #5b7fa6);
}

/* Compact card for dual-column — no name-card__info wrapper needed */
.state-page__dual .state-name-card {
    grid-template-columns: 32px 1fr auto;
    padding: var(--space-sm) var(--space-md);
    margin-bottom: 2px;
    gap: var(--space-sm);
}

.state-name-card__name {
    font-size: 0.9375rem;
    font-weight: var(--weight-medium);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.state-page__dual .state-name-card__rank {
    font-size: 0.875rem;
}

.state-page__dual .state-name-card--top3 .state-name-card__rank {
    font-size: 1rem;
}

.state-names-list {
    margin-top: 0;
}

/* Explore all states CTA row */
.state-page__footer-cta {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border-light);
}

/* ===== Prose content links (v1.3) ===== */
/* Applies to any stored HTML prose — origin detail, hub intro, blog post content, faq answers */
.prose-link,
.hub-hero__intro a,
.origin-detail a,
.origin-body a,
.faq-answer a,
.blog-post a,
.name-body a,
article .post-content a,
.post-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}

.hub-hero__intro a:hover,
.origin-detail a:hover,
.origin-body a:hover,
.faq-answer a:hover,
.blog-post a:hover,
.name-body a:hover,
article .post-content a:hover,
.post-content a:hover,
.hub-hero__intro a:focus,
.origin-detail a:focus,
.origin-body a:focus,
.faq-answer a:focus,
.blog-post a:focus,
.name-body a:focus,
article .post-content a:focus,
.post-content a:focus {
    text-decoration-thickness: 2px;
}

/* External link marker — subtle arrow */
.hub-hero__intro a[target="_blank"]::after,
.origin-detail a[target="_blank"]::after,
.origin-body a[target="_blank"]::after,
.blog-post a[target="_blank"]::after,
.post-content a[target="_blank"]::after {
    content: " ↗";
    font-size: 0.85em;
    opacity: 0.7;
}


/* === name-page.css === */
/* ─── Name Page ─────────────────────────────────────────────────────────────── */

/* Hero */
.name-hero {
    position: relative;
    padding: var(--space-2xl) var(--space-xl) var(--space-xl);
    margin-top: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    text-align: center;
}

/* Subtle warm radial bloom */
.name-hero::before {
    content: '';
    position: absolute;
    inset: -40% -40% auto -40%;
    height: 70%;
    background: radial-gradient(ellipse 55% 100% at 50% 0%,
        rgba(196, 93, 62, 0.08) 0%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Gender ribbon - diagonal corner stripe top-right */
.name-hero__ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.name-hero__ribbon-label {
    position: absolute;
    top: 28px;
    right: -42px;
    width: 180px;
    transform: rotate(45deg);
    text-align: center;
    padding: 6px 0;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(26, 22, 20, 0.18);
}

.name-hero--girl .name-hero__ribbon-label {
    background: linear-gradient(135deg, var(--girl-pink) 0%, #B85560 100%);
}
.name-hero--boy .name-hero__ribbon-label {
    background: linear-gradient(135deg, var(--boy-blue) 0%, #3670A0 100%);
}
.name-hero--unisex .name-hero__ribbon-label {
    background: linear-gradient(135deg, var(--girl-pink) 0%, var(--girl-pink) 49%, var(--boy-blue) 51%, var(--boy-blue) 100%);
}

.name-hero__title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.name-hero__title {
    position: relative;
    z-index: 1;
    margin: 0 0 var(--space-sm);
    letter-spacing: -0.01em;
}

.name-hero__speak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
    border: 1.5px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: var(--space-sm);
}
.name-hero__speak:hover,
.name-hero__speak.is-speaking {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.name-hero__title::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--accent);
    margin: var(--space-md) auto 0;
    border-radius: 2px;
}

.name-hero__subtitle {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin: calc(var(--space-xs) * -1) 0 var(--space-md);
    letter-spacing: 0.01em;
}

.name-hero__pronunciation {
    position: relative;
    z-index: 1;
    font-size: var(--text-h3);
    color: var(--text-tertiary);
    font-style: italic;
    margin: 0 0 var(--space-lg);
    letter-spacing: 0.01em;
}

.name-hero__lede {
    position: relative;
    z-index: 1;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text);
    max-width: 62ch;
    margin: 0 auto var(--space-xl);
    text-wrap: pretty;
}

.name-hero__lede strong { font-weight: var(--weight-semibold); }
.name-hero__meaning-label { color: var(--text-secondary); font-size: 0.875rem; display: block; margin-bottom: 0.25rem; }
.name-hero__lede em { font-style: italic; }

/* Country map SVG — explicit dimensions prevent CLS */
/* Country map placeholder — hidden until real SVG outlines are sourced */
.name-hero__country-map {
    display: none;
}

/* Stats row - accent cards */
.name-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.name-stats .stat-card {
    min-width: 130px;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.name-stats .stat-card--accent {
    background: linear-gradient(145deg, #C45D3E 0%, #A84A2E 100%);
    border: 1px solid rgba(26, 22, 20, 0.06);
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(196, 93, 62, 0.28);
}

.name-stats .stat-card--accent .stat-card__label {
    font-size: 10px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 6px;
}

.name-stats .stat-card--accent .stat-card__value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: var(--weight-regular);
    line-height: 1;
    color: #FFFFFF;
}

/* Rank badge card */
.name-stats .stat-card--rank .stat-card__value {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    min-height: 80px;
}

.rank-badge-svg {
    position: absolute;
    inset: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    overflow: visible;
}

.rank-badge-num {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.name-stats .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(196, 93, 62, 0.34);
}

/* Intro paragraphs between hero card and chart — no box, just clean text */
.name-intro {
    padding: var(--space-xl) 0 var(--space-md);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--text);
    max-width: 68ch;
}

@media (max-width: 767px) {
    .name-intro { max-width: 100%; }
}
.name-intro p {
    margin: 0 0 1.2em;
}
.name-intro p:last-child {
    margin-bottom: 0;
}
.name-intro strong { font-weight: var(--weight-semibold); }
.name-intro em { font-style: italic; }

/* Tags row */
.name-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    padding-block: var(--space-lg);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-xs);
}

/* Sections */
.name-section {
    padding-block: var(--space-2xl);
}

.name-section + .name-section {
    border-top: 1px solid var(--border-light);
}

/* Section titles — small coral accent mark */
.name-section__title {
    margin-bottom: var(--space-lg);
    position: relative;
    padding-bottom: var(--space-sm);
}

.name-section__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

/* Origin detail */
/* ── Editorial body typography ───────────────────────────────────────── */

.name-origin-detail {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--text);
    max-width: 68ch;
    margin-inline: auto;
}

.name-origin-detail p {
    margin: 0 0 1.3em;
}

.name-origin-detail p:last-child {
    margin-bottom: 0;
}

/* Lead paragraph - slightly larger, no drop cap (would conflict with bolded name) */
.name-origin-detail > p:first-of-type {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 1.5em;
}

/* Inline emphasis - SUBTLE. Strong = weight only. Em = italic only. */
.name-origin-detail strong {
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.name-origin-detail em {
    font-style: italic;
    color: var(--text);
}

/* Auto-linked origin term (from nlp-seo) */
.name-origin-detail a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    font-weight: var(--weight-medium);
    transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}

.name-origin-detail a:hover {
    text-decoration-thickness: 2px;
}

/* Optional H3 subheadings within etymology */
.name-origin-detail h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--text);
    margin: 1.8em 0 0.6em;
    text-transform: none;
    letter-spacing: -0.01em;
}

.name-day {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--accent-bg);
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
    color: var(--accent);
    margin-top: var(--space-lg);
}

/* Chart */
.name-chart {
    margin-top: var(--space-md);
}

.chart-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 6;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: visible;
    box-shadow: var(--shadow-card);
}

.chart-container svg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
}

@media (max-width: 480px) {
    .chart-container { aspect-ratio: 4 / 3; }
}

.chart-tooltip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--text);
    color: #FFFFFF;
    border-radius: var(--radius-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(26, 22, 20, 0.25);
}

.chart-tooltip.visible {
    opacity: 1;
}

.chart-tooltip__rank {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--weight-semibold);
    color: var(--accent-light);
    line-height: 1;
}

.chart-tooltip__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.chart-tooltip__year {
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    color: #FFFFFF;
    letter-spacing: 0.02em;
}

.chart-tooltip__count {
    font-size: var(--text-caption);
    color: rgba(255, 255, 255, 0.6);
}

/* Similar names grid */
.similar-names-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-sm);
}

.similar-name-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
}

.similar-name-card:hover {
    border-color: var(--accent-light);
    box-shadow: 0 6px 20px rgba(196, 93, 62, 0.14);
    transform: translateY(-3px) scale(1.01);
}

.similar-name-card__name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-body);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.similar-name-card__meaning {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    margin-top: 2px;
}

.similar-name-card .mygall-icon {
    color: transparent;
    flex-shrink: 0;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.similar-name-card:hover .mygall-icon {
    color: var(--accent);
    transform: translateX(2px);
}

/* CTA below similar names grid */
.similar-names-cta {
    margin-top: var(--space-md);
    font-size: var(--text-small);
    color: var(--text-tertiary);
}

.similar-names-cta a {
    color: var(--accent);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.similar-names-cta a:hover {
    text-decoration: underline;
}

/* State popularity */
.state-popularity {
    margin-top: var(--space-md);
}

.state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 6px;
}

.state-grid__item {
    text-align: center;
    padding: var(--space-sm) var(--space-xs);
    background: var(--bg-warm);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: var(--text-caption);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.state-grid__item:hover {
    background: var(--accent-bg);
    border-color: var(--accent-light);
}

.state-grid__abbr {
    font-weight: var(--weight-semibold);
    color: var(--text);
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
}

.state-grid__rank {
    color: var(--accent);
    font-weight: var(--weight-medium);
    font-size: 0.6875rem;
}

/* On mobile: hide tabs + map panel — list only */
@media (max-width: 767px) {
    .state-view-tabs { display: none !important; }
    .state-map-panel { display: none !important; }
}

/* State map/list toggle */
.state-view-tabs {
    display: flex;
    gap: var(--space-xs);
}

.state-view-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.state-view-tab:hover {
    color: var(--text);
    border-color: var(--text-tertiary);
}

.state-view-tab.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.state-map-panel {
    margin-top: var(--space-md);
    position: relative;
}

.state-map-panel svg.us-states-map {
    width: 100%;
    height: auto;
    display: block;
}

.state-map-panel .us-state {
    fill: var(--accent-bg);
    stroke: var(--surface);
    stroke-width: 0.6;
    cursor: pointer;
    transition: fill 0.15s;
}

.state-map-panel .us-state:hover,
.state-map-panel .us-state:focus {
    fill: var(--accent-light);
    outline: none;
}

.state-map-panel .us-state[data-rank="1"] { fill: color-mix(in srgb, var(--accent) 95%, white); }
.state-map-panel .us-state[data-rank="2"] { fill: color-mix(in srgb, var(--accent) 75%, white); }
.state-map-panel .us-state[data-rank="3"] { fill: color-mix(in srgb, var(--accent) 55%, white); }
.state-map-panel .us-state[data-rank="4"] { fill: color-mix(in srgb, var(--accent) 35%, white); }
.state-map-panel .us-state[data-rank="5"] { fill: color-mix(in srgb, var(--accent) 18%, white); }

.state-map-panel__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    color: var(--text-tertiary);
}

.state-map-panel__error {
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--text-small);
    padding: var(--space-md);
}

.state-map-tooltip,
#mygall-state-tt {
    position: fixed;
    z-index: 9999;
    background: #1a0e08;
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    padding: 12px 18px;
    pointer-events: none;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    display: none;
    min-width: 170px;
    max-width: 240px;
    line-height: 1.4;
}

.state-map-tooltip.is-visible,
#mygall-state-tt.is-visible {
    display: block;
}

.state-map-tooltip__state {
    display: block;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px;
    line-height: 1.2;
}

.state-map-tooltip__rank {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    color: #ffbf9a;
    letter-spacing: 0.01em;
}

/* Variant table */
.variant-table {
    width: 100%;
    border-collapse: collapse;
}

.variant-table th {
    text-align: left;
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 2px solid var(--border);
}

.variant-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: var(--text-body);
}

.variant-table tr:last-child td {
    border-bottom: none;
}

.variant-table a {
    color: var(--accent);
    font-weight: var(--weight-medium);
}

/* FAQ */
.name-faq {
    max-width: 760px;
}

.faq-item {
    border-bottom: 1px solid var(--border-light);
}

.faq-item:first-of-type {
    border-top: 1px solid var(--border-light);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 0;
    min-height: 44px;
    touch-action: manipulation;
    cursor: pointer;
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    color: var(--text);
    list-style: none;
    gap: var(--space-md);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary .mygall-icon {
    transition: transform 200ms ease;
    flex-shrink: 0;
    color: var(--text-tertiary);
}

.faq-item[open] summary .mygall-icon {
    transform: rotate(180deg);
    color: var(--accent);
}

.faq-item[open] summary {
    color: var(--accent);
}

.faq-item__answer {
    padding-bottom: var(--space-lg);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    font-size: var(--text-body);
}

/* Semantic links section */
.semantic-links {
    padding-block: var(--space-xl);
    border-top: 1px solid var(--border-light);
}

.semantic-links .name-section__title {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-md);
}

.semantic-links .name-section__title::after {
    display: none;
}

/* Sidebar */
.name-sidebar .widget + .widget {
    margin-top: var(--space-xl);
}

/* Sidebar quick stats */
.sidebar-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 0;
    margin: 0;
}

.sidebar-stats dt {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-sm) var(--space-sm) 2px 0;
    grid-column: 1;
}

.sidebar-stats dd {
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    color: var(--text);
    padding: var(--space-sm) 0 2px var(--space-sm);
    margin: 0;
    grid-column: 2;
    text-align: right;
}

.name-sidebar .widget-title {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-md);
}

/* Author byline */
.author-byline {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-warm);
    border-radius: var(--radius-md);
    font-size: var(--text-small);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    margin-top: var(--space-xl);
}

.author-byline .mygall-icon {
    color: var(--accent);
    flex-shrink: 0;
}

.author-byline__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--accent-light, #f0d6c8);
}

/* ── Famous bearers ────────────────────────────────────────────────── */
.famous-bearers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-sm);
}

.famous-bearer {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--bg-warm);
    border-radius: 6px;
    transition: background var(--transition-fast);
}

.famous-bearer:hover {
    background: var(--accent-bg);
}

.famous-bearer__icon {
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 2px;
}

.famous-bearer__info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-xs);
}

.famous-bearer__name {
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.famous-bearer__years {
    font-size: var(--text-small);
    color: var(--text-tertiary);
}

.famous-bearer__desc {
    width: 100%;
    font-size: var(--text-small);
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ── Numerology & birthstone ──────────────────────────────────────── */
.numerology-disclaimer {
    font-size: var(--text-small);
    color: var(--text-tertiary);
    margin: 0 0 var(--space-lg);
    font-style: italic;
}

.numerology-formula {
    text-align: center;
    padding: var(--space-md) 0 var(--space-lg);
}

.numerology-formula__text {
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
}

.numerology-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.numerology-card {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}

.numerology-card__label {
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-sm);
}

.numerology-card__number {
    font-family: var(--font-display);
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: var(--space-xs);
    color: var(--accent);
}
.numerology-card--destiny .numerology-card__number {
    color: var(--num-color, var(--accent));
}

.numerology-card__trait {
    font-weight: var(--weight-semibold);
    font-size: var(--text-body);
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.numerology-card__how {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    line-height: 1.4;
}

.numerology-details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
}

.numerology-detail {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 6px;
}

.numerology-detail__label {
    font-size: var(--text-small);
    color: var(--text-tertiary);
    flex: 1;
}

.numerology-detail__value {
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.numerology-detail__swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--num-color, var(--accent));
}

/* ── Pythagorean Scale collapsible ───────────────────────────────── */
.pyth-scale {
    margin-top: var(--space-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.pyth-scale__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card);
    border: none;
    cursor: pointer;
    text-align: left;
    gap: var(--space-sm);
}

.pyth-scale__toggle:hover {
    background: var(--bg-warm);
}

.pyth-scale__toggle-label {
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pyth-scale__toggle-icon {
    color: var(--text-tertiary);
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.pyth-scale__toggle[aria-expanded="true"] .pyth-scale__toggle-icon {
    transform: rotate(180deg);
}

.pyth-scale__body {
    background: var(--bg-card);
    padding: 0 var(--space-lg) var(--space-md);
}

.pyth-scale__body[hidden] {
    display: none;
}

.pyth-scale__grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pyth-scale__row {
    display: grid;
    grid-template-columns: 2rem 7rem 1fr;
    align-items: baseline;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

.pyth-scale__row:hover {
    background: var(--bg-warm);
}

.pyth-scale__row--master {
    background: var(--bg-warm);
}

.pyth-scale__num {
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    color: var(--accent);
    text-align: right;
}

.pyth-scale__row--master .pyth-scale__num {
    color: var(--num-color, var(--accent));
}

.pyth-scale__kw {
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.pyth-scale__desc {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    line-height: 1.4;
}

@media (max-width: 767px) {
    .pyth-scale__row {
        grid-template-columns: 2rem 1fr;
        grid-template-rows: auto auto;
    }
    .pyth-scale__desc {
        grid-column: 2;
    }
}

/* ── Middle names ─────────────────────────────────────────────────── */
.name-section__intro {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    font-size: var(--text-body);
}

.middle-names-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-sm);
}

.middle-name-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    transition: border-color var(--transition-fast);
}

.middle-name-card:hover {
    border-color: var(--accent-light);
}

.middle-name-card__combo {
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--text);
}

.middle-name-card__reason {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    margin-top: 4px;
    line-height: 1.4;
}

/* ── Cross-reference name links ───────────────────────────────────── */
.name-xref {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}

.name-xref:hover {
    text-decoration-thickness: 2px;
}

/* ── Mobile ──────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .name-hero {
        padding: var(--space-xl) var(--space-md) var(--space-lg);
    }
    .name-hero__ribbon { width: 110px; height: 110px; }
    .name-hero__ribbon-label {
        top: 20px;
        right: -50px;
        font-size: 10px;
    }

    .name-stats {
        gap: var(--space-sm);
    }

    .name-stats .stat-card {
        min-width: 0;
        flex: 1 1 calc(50% - var(--space-sm));
        padding: var(--space-sm) var(--space-xs);
    }
    .name-stats .stat-card--accent .stat-card__value { font-size: 1.375rem; }

    .numerology-trio { grid-template-columns: 1fr; }
    .numerology-details { grid-template-columns: repeat(2, 1fr); }
    .famous-bearers { grid-template-columns: 1fr; }
    .middle-names-grid { grid-template-columns: 1fr; }

    .similar-names-grid {
        grid-template-columns: 1fr 1fr;
    }

    .state-grid {
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    }
}

@media (max-width: 400px) {
    .similar-names-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Country Popularity ─────────────────────────────────────────────────── */

.country-pop {
    margin-top: var(--space-2xl);
}

.country-pop__this-rank {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-subtle, #faf9f7);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    font-size: var(--text-small);
    color: var(--text-secondary);
}

.country-pop__this-rank strong {
    color: var(--accent);
    font-weight: 600;
}

.country-pop__not-ranked {
    font-size: var(--text-small);
    color: var(--text-tertiary);
    font-style: italic;
    margin-bottom: var(--space-md);
}

.country-pop__list {
    list-style: none;
    margin: 0 0 var(--space-md);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.country-pop__list--compact {
    margin-bottom: 0;
}

.country-pop__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px var(--space-sm);
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.country-pop__item:hover {
    background: var(--bg-subtle, #faf9f7);
}

.country-pop__item--current {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-weight: 600;
}

.country-pop__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background: var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.country-pop__item--current .country-pop__rank {
    background: var(--accent);
    color: #fff;
}

.country-pop__name {
    flex: 1;
    color: var(--text-primary);
    text-decoration: none;
}

a.country-pop__name:hover {
    color: var(--accent);
    text-decoration: underline;
}

.country-pop__name--current {
    color: var(--accent);
}

.country-pop__you {
    margin-left: 4px;
    color: var(--accent);
    font-style: normal;
}

.country-pop__count {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-left: auto;
}

/* Accordion (extra countries) */
.country-pop__extra {
    margin-top: var(--space-md);
    border-top: 1px solid var(--border);
    padding-top: var(--space-md);
}

.country-pop__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-small);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.country-pop__toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.country-pop__toggle .mygall-icon {
    transition: transform 0.2s;
}

.country-pop__toggle[aria-expanded="true"] .mygall-icon {
    transform: rotate(180deg);
}

.country-pop__accordion {
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.country-pop__accordion-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.country-pop__accordion-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-subtle, #faf9f7);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.country-pop__accordion-rank {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.country-pop__accordion .country-pop__list {
    padding: var(--space-xs) var(--space-sm);
}

@media (max-width: 640px) {
    .country-pop__count { display: none; }
}

/* ───────────────────────────────────────────────────────────────
   SIDEBAR WIDGETS — passive discovery (no registration friction)
   ─────────────────────────────────────────────────────────────── */

.widget {
    background: var(--bg-subtle, #faf9f7);
    border: 1px solid var(--border, #ede8e2);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.widget-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin: 0 0 var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--accent);
}

/* Quick stats */
.widget-stats .sidebar-stats {
    margin: 0;
    display: grid;
    gap: var(--space-xs);
}
.widget-stats dt {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.widget-stats dd {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-xs);
}
.widget-stats .stat-big {
    font-family: var(--font-serif, 'Instrument Serif', serif);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--accent);
    line-height: 1;
}

/* Trending list */
.sidebar-trending-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: trending;
}
.sidebar-trending-list li {
    margin: 0;
}
.sidebar-trending-list a {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: var(--space-xs);
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.15s;
    min-height: 44px;
}
.sidebar-trending-list li:last-child a { border-bottom: none; }
.sidebar-trending-list a:hover { color: var(--accent); }

.trend-rank {
    font-family: var(--font-serif, 'Instrument Serif', serif);
    font-size: 1.25rem;
    color: var(--accent);
    font-weight: 400;
    text-align: center;
}
.trend-name {
    font-size: 0.9375rem;
    font-weight: 500;
}
.trend-gender {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.trend-gender--girl { background: var(--dot-girl, #E8A0BF); }
.trend-gender--boy  { background: var(--dot-boy, #7EB3D9); }
.trend-gender--unisex { background: var(--dot-unisex, #B5A88C); }

/* Sidebar name lists (More Origin, Letter, Rare Gems widgets) */
.sidebar-name-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-name-list li {
    margin: 0;
}
.sidebar-name-list a {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.15s;
    min-height: 40px;
}
.sidebar-name-list li:last-child a { border-bottom: none; }
.sidebar-name-list a::before {
    content: '›';
    color: var(--accent);
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}
.sidebar-name-list a:hover { color: var(--accent); }
.snl-name {
    flex: 1;
}
.snl-rank {
    font-size: 0.8125rem;
    color: var(--text-muted, #9A8B7E);
    font-variant-numeric: tabular-nums;
}

/* Origins pills */
.sidebar-origins-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}
.sidebar-origins-list .tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.15s;
    min-height: 32px;
}
.sidebar-origins-list .tag:hover {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}

/* Blog list */
.sidebar-blog-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-blog-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.sidebar-blog-list li:last-child { border-bottom: none; }
.sidebar-blog-list a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.4;
    transition: color 0.15s;
    display: block;
}
.sidebar-blog-list a:hover { color: var(--accent); }

/* Desktop: sidebar flows naturally. No sticky, no stretch, no inner scroll. */
@media (min-width: 1024px) {
    .name-sidebar {
        align-self: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR WIDGETS v2 — Decade Tracker + Origin Card + Editorial
   ═══════════════════════════════════════════════════════════════════════════ */
.widget-decade-tracker,
.widget-origin-card,
.widget-editorial {
    background: var(--bg-subtle, #faf9f7);
    border: 1px solid var(--border, #ede8e2);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-md) var(--space-sm);
    margin-bottom: var(--space-md);
}
.widget-label {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-secondary, #6b6560);
    margin: 0 0 var(--space-sm); display: flex; align-items: center; gap: var(--space-xs);
}
.wdt-badge {
    display: inline-flex; padding: 2px 7px; border-radius: 100px;
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.6;
}
.wdt-badge--trend-up { background: color-mix(in srgb, #22c55e 12%, transparent); color: #15803d; }
.wdt-badge--trend-down { background: color-mix(in srgb, #ef4444 10%, transparent); color: #b91c1c; }
.wdt-badge--trend-flat { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.wdt-chart { width: 100%; overflow: hidden; border-radius: 6px; margin-bottom: 4px; }
.wdt-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.wdt-axis { display: flex; justify-content: space-between; padding: 0 2px; margin-bottom: var(--space-xs); }
.wdt-axis__label { font-size: 0.6875rem; color: var(--text-tertiary, #9b938d); font-weight: 500; line-height: 1; }
.wdt-axis__label--peak { color: var(--accent); font-weight: 700; }
.wdt-footnote { font-size: 0.75rem; color: var(--text-tertiary, #9b938d); margin: 0; line-height: 1.4; }
.wdt-footnote strong { color: var(--accent); font-weight: 700; }
.wdt-anchor { color: var(--accent); text-decoration: none; font-weight: 600; white-space: nowrap; }
.wdt-anchor:hover { text-decoration: underline; }

.widget-origin-card { padding: 0; overflow: hidden; }
.woc-link { display: block; text-decoration: none; color: inherit; transition: background 0.15s ease; }
.woc-link:hover { background: var(--bg-warm, #f5f1ec); }
.woc-inner { padding: var(--space-md); }
.woc-eyebrow { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--accent); margin-bottom: 4px; }
.woc-headline { display: flex; align-items: baseline; gap: 6px; margin-bottom: var(--space-xs); }
.woc-count { font-family: var(--font-display, 'Instrument Serif', serif);
    font-size: 2.25rem; font-weight: 400; color: var(--text, #1a1614); line-height: 1; }
.woc-label { font-size: 0.9375rem; font-weight: 500; color: var(--text-secondary, #4a4440); line-height: 1.2; }
.woc-desc { font-size: 0.8125rem; color: var(--text-secondary, #4a4440); line-height: 1.5; margin: 0 0 var(--space-sm); }
.woc-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem;
    font-weight: 600; color: var(--accent); transition: gap 0.15s ease; }
.woc-link:hover .woc-cta { gap: 7px; }

.wep-card { display: flex; align-items: flex-start; gap: var(--space-sm);
    text-decoration: none; color: inherit; padding: var(--space-xs) 0 0; transition: opacity 0.15s; }
.wep-card:hover { opacity: 0.85; }
.wep-thumb { flex-shrink: 0; width: 64px; height: 64px; border-radius: 6px;
    overflow: hidden; background: var(--bg-warm, #f5f1ec); border: 1px solid var(--border-light, #e8e2d9); }
.wep-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wep-thumb--icon { display: flex; align-items: center; justify-content: center; color: var(--accent); }
.wep-body { flex: 1; min-width: 0; }
.wep-date { display: block; font-size: 0.6875rem; color: var(--text-tertiary, #9b938d);
    font-weight: 500; margin-bottom: 3px; }
.wep-title { font-size: 0.875rem; font-weight: 600; color: var(--text, #1a1614);
    line-height: 1.35; margin: 0 0 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wep-excerpt { font-size: 0.75rem; color: var(--text-secondary, #4a4440); line-height: 1.45; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 360px) {
    .woc-count { font-size: 1.75rem; }
    .wdt-chart svg { height: 48px; }
    .wep-thumb { width: 52px; height: 52px; }
}

/* Blog list within editorial widget */
.wep-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.wep-list .wep-card { padding: var(--space-xs) 0; border-top: 1px solid var(--border-light, #ede8e2); }
.wep-list .wep-card:first-child { border-top: 0; padding-top: 0; }


/* === hub-pages.css === */
/* ─── Mega Menu ────────────────────────────────────────────────────────────── */

.nav-primary__list {
    display: none;
    align-items: center;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 1024px) {
    .nav-primary__list { display: flex; }
}

.nav-primary__item {
    position: relative;
}

.nav-primary__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    color: var(--text);
    font-weight: var(--weight-medium);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.nav-primary__link:hover,
.nav-primary__link[aria-current="page"] {
    color: var(--accent);
}

.nav-primary__item--mega .nav-primary__link svg:last-child {
    transition: transform var(--transition-fast);
}

.nav-primary__item--mega:hover .nav-primary__link svg:last-child,
.nav-primary__item--mega:focus-within .nav-primary__link svg:last-child,
.nav-primary__item--mega.is-open .nav-primary__link svg:last-child {
    transform: rotate(180deg);
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: min(1080px, 95vw);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 48px rgba(26, 22, 20, 0.12);
    padding: var(--space-xl);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 180ms ease;
    z-index: 200;
}

.mega-menu--narrow {
    width: min(420px, 90vw);
}

.nav-primary__item--mega:hover .mega-menu,
.nav-primary__item--mega:focus-within .mega-menu,
.nav-primary__item--mega.is-open .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.mega-menu__inner {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(160px, 1fr) minmax(220px, 1fr) minmax(180px, 1fr);
    gap: var(--space-lg);
    align-items: start;
}

.mega-menu--narrow .mega-menu__inner {
    grid-template-columns: 1fr;
}

.mega-menu__col {
    min-width: 0;
}

.mega-menu__label {
    font-size: 0.6875rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    margin: 0 0 var(--space-md);
}

.mega-menu__namelist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mega-menu__namelist a {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    gap: 0 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.mega-menu__namelist a:hover {
    background: var(--accent-bg);
}

.mega-menu__rank {
    grid-row: 1 / 3;
    align-self: center;
    font-family: var(--font-display);
    font-size: 0.875rem;
    color: var(--accent);
    font-weight: var(--weight-semibold);
}

.mega-menu__name {
    font-weight: var(--weight-semibold);
    color: var(--text);
    font-size: 0.9375rem;
    line-height: 1.2;
}

.mega-menu__meaning {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    line-height: 1.2;
}

.mega-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mega-menu__list--cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}

.mega-menu__list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 6px;
    transition: all var(--transition-fast);
    gap: 8px;
}

.mega-menu__list a:hover {
    background: var(--accent-bg);
    color: var(--accent);
}

.mega-menu__count {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.mega-menu__letters {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.mega-menu__letters a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-family: var(--font-display);
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.mega-menu__letters a:hover {
    background: var(--accent);
    color: #FFFFFF;
}

.mega-menu__col--cta {
    display: flex;
    flex-direction: column;
}

/* Quick picks list: icon and label hug the left edge */
.mega-menu__col--cta .mega-menu__list a {
    justify-content: flex-start;
    gap: 10px;
}
.mega-menu__col--cta .mega-menu__list a .mygall-icon {
    color: var(--accent);
    flex-shrink: 0;
}

.mega-menu__cta {
    margin-top: auto;
    padding: 10px 16px;
    background: var(--text);
    color: #FFFFFF;
    text-align: center;
    border-radius: 16px;
    font-size: 0.8125rem;
    font-weight: var(--weight-semibold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all var(--transition-fast);
}

.mega-menu__cta:hover {
    background: var(--accent);
    transform: translateY(-1px);
}

/* ─── Homepage ──────────────────────────────────────────────────────────────── */

.hp-hero {
    padding-block: var(--space-2xl) var(--space-xl);
    text-align: center;
    background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--border-light);
}

.hp-hero__eyebrow {
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: var(--space-md);
}

.hp-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: var(--weight-regular);
    line-height: 1.05;
    color: var(--text);
    margin-bottom: var(--space-lg);
    letter-spacing: -0.02em;
    text-transform: none;
}

.hp-hero__title-accent {
    color: var(--accent);
    font-style: italic;
}

.hp-hero__sub {
    color: var(--text-secondary);
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto var(--space-xl);
}

.hp-hero__sub strong {
    color: var(--text);
    font-weight: var(--weight-semibold);
}

.hp-hero__search {
    max-width: 520px;
    margin: 0 auto var(--space-lg);
    position: relative;
}

.hp-hero__quick {
    margin-top: var(--space-md);
}

.hp-hero__quick-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-small);
    color: var(--text-tertiary);
    transition: color var(--transition-fast);
}

.hp-hero__quick-link:hover {
    color: var(--accent);
}

.hp-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    gap: var(--space-md);
}

.hp-section-head h2 {
    margin: 0;
}

.hp-feed__footer-link {
    margin-top: var(--space-md);
}

.hp-see-all {
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--accent);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap var(--transition-fast);
}

.hp-see-all:hover {
    gap: 8px;
}

/* ─── Main feed (top 500-1000 names) ─────────────────────────────── */

.hp-feed {
    padding: var(--space-2xl) 0;
}

.hp-feed__head {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.hp-feed__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: var(--space-sm);
    text-transform: none;
    letter-spacing: -0.01em;
}

.hp-feed__sub {
    color: var(--text-secondary);
    font-size: 1.0625rem;
}

.hp-feed__tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.hp-feed__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    min-height: 44px;
    touch-action: manipulation;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.hp-feed__tab:hover {
    border-color: var(--accent-light);
    color: var(--text);
}

.hp-feed__tab.is-active {
    background: var(--text);
    color: #FFFFFF;
    border-color: var(--text);
}

.hp-feed__tab-count {
    font-size: 0.75rem;
    opacity: 0.6;
    font-weight: var(--weight-regular);
}

.hp-feed__filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-light);
}

.hp-feed__filter-label {
    font-size: var(--text-small);
    color: var(--text-tertiary);
    margin-right: 4px;
}

.hp-feed__filter {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    min-height: 44px;
    touch-action: manipulation;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 16px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.hp-feed__filter:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.hp-feed__filter.is-active {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: var(--weight-semibold);
}

.hp-feed__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

/* SEO-safe progressive reveal: all 588 in HTML, hide visually after #100 */
.hp-feed__grid[data-revealed="100"] [data-feed-item]:nth-child(n+101) { display: none; }
.hp-feed__grid[data-revealed="200"] [data-feed-item]:nth-child(n+201) { display: none; }
.hp-feed__grid[data-revealed="300"] [data-feed-item]:nth-child(n+301) { display: none; }
.hp-feed__grid[data-revealed="400"] [data-feed-item]:nth-child(n+401) { display: none; }
.hp-feed__grid[data-revealed="500"] [data-feed-item]:nth-child(n+501) { display: none; }
/* "all" reveals everything */

/* Gender filter via tab data-attribute */
.hp-feed[data-tab="girl"] .hp-feed__grid [data-feed-item][data-gender="boy"] { display: none; }
.hp-feed[data-tab="boy"] .hp-feed__grid [data-feed-item][data-gender="girl"] { display: none; }
.hp-feed__grid [data-feed-item].is-origin-hidden { display: none; }

.feed-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    background: var(--bg-card);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-fast);
    min-height: 80px;
}

.feed-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(196, 93, 62, 0.08);
    transform: translateY(-2px);
}


.feed-card__main {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    min-width: 0;
}

.feed-card__rank {
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--accent);
    font-weight: var(--weight-semibold);
    min-width: 42px;
    flex-shrink: 0;
}

.feed-card__body {
    flex: 1;
    min-width: 0;
}

.feed-card__name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: var(--weight-semibold);
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-card__meaning {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-card__arrow {
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
    flex-shrink: 0;
    margin-left: var(--space-sm);
}

.feed-card:hover .feed-card__arrow {
    color: var(--accent);
    transform: translateX(2px);
}

.hp-feed__footer {
    text-align: center;
    margin-top: var(--space-xl);
}

.hp-feed__reveal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--text);
    color: #FFFFFF;
    border: none;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: var(--space-md);
}

.hp-feed__reveal-btn:hover {
    background: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(196, 93, 62, 0.3);
}

.hp-feed__reveal-btn[hidden] { display: none; }

/* ─── Origins block ──────────────────────────────────────────────── */

.hp-origins {
    padding: var(--space-2xl) 0;
    background: var(--bg-warm);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.hp-origins__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.origin-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    text-align: center;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.origin-card:hover {
    border-color: var(--accent);
    background: var(--accent-bg);
    transform: translateY(-2px);
}

.origin-card__name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--text);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.origin-card__count {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
}

/* ─── Three quick paths ──────────────────────────────────────────── */

.hp-paths {
    padding: var(--space-2xl) 0;
}

.hp-paths__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
}

.hp-path {
    display: flex;
    flex-direction: column;
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-fast);
}

.hp-path:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(26, 22, 20, 0.08);
}

.hp-path__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--accent-bg);
    border-radius: 12px;
    margin-bottom: var(--space-md);
    color: var(--accent);
}

.hp-path__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0 0 var(--space-sm);
    text-transform: none;
}

.hp-path__sub {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: var(--space-md);
    flex: 1;
}

.hp-path__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-weight: var(--weight-semibold);
    font-size: var(--text-small);
}

/* ─── Mobile responsive ──────────────────────────────────────────── */

@media (max-width: 767px) {
    .hp-feed__grid {
        grid-template-columns: 1fr;
    }
    .hp-feed__tabs {
        gap: 4px;
    }
    .hp-feed__tab {
        padding: 8px 16px;
        font-size: 0.8125rem;
    }
    .hp-feed__filters {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--space-md);
        scrollbar-width: none;
    }
    .hp-feed__filters::-webkit-scrollbar { display: none; }
    .hp-feed__filter {
        flex-shrink: 0;
    }
    .feed-card {
        padding: var(--space-sm) var(--space-md);
        min-height: 68px;
    }
    .feed-card__rank {
        font-size: 1rem;
        min-width: 36px;
    }
    .hp-paths__grid {
        grid-template-columns: 1fr;
    }
    .hp-origins__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.name-card__rank {
    font-family: var(--font-display);
    font-size: var(--text-small);
    color: var(--text-tertiary);
    flex-shrink: 0;
    margin-left: var(--space-md);
}

/* ─── Hub Pages ─────────────────────────────────────────────────────────────── */

.hub-hero {
    padding-block: var(--space-2xl);
    text-align: center;
}

.hub-hero__title {
    margin-bottom: var(--space-md);
}

.hub-hero__intro {
    max-width: 680px;
    margin-inline: auto;
    color: var(--text-secondary);
    font-size: var(--text-h3);
    line-height: var(--leading-relaxed);
}

.hub-hero__intro a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}

.hub-hero__intro a:hover,
.hub-hero__intro a:focus {
    text-decoration-thickness: 2px;
    color: var(--accent);
}

/* Name card in grid */
.name-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: all var(--transition-fast);
}

.name-card:hover {
    border-color: var(--accent-light);
    box-shadow: var(--shadow-elevated);
}


.name-card__info {
    flex: 1;
    min-width: 0;
}

.name-card__name {
    font-weight: var(--weight-semibold);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.name-card__pronunciation {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    font-style: italic;
}

.name-card__meaning {
    font-size: var(--text-small);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.name-card__arrow {
    color: var(--accent);
    flex-shrink: 0;
    margin-left: var(--space-md);
}

/* Filter controls */
.filter-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    padding-block: var(--space-md);
    margin-bottom: var(--space-lg);
}

.filter-controls select {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    font-size: var(--text-small);
    color: var(--text-secondary);
    min-height: 44px;
}

/* Popular ranking list */
/* Popular page year navigation */
.popular-year-nav {
    margin: var(--space-lg) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.popular-year-nav__decade {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.popular-year-nav__decade-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    min-width: 3.5rem;
}
.popular-year-nav__years {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.popular-year-nav__year {
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.popular-year-nav__year:hover {
    background: var(--color-surface-2);
    color: var(--color-text);
}
.popular-year-nav__year.is-active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.rank-list {
    list-style: none;
}

.rank-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-light);
    transition: background var(--transition-fast);
}

.rank-list__item:hover {
    background: var(--bg-warm);
}

.rank-list__number {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    color: var(--text-tertiary);
    min-width: 48px;
    text-align: right;
}

.rank-list__name {
    font-weight: var(--weight-semibold);
    flex: 1;
}

.rank-list__count {
    font-size: var(--text-small);
    color: var(--text-tertiary);
}

/* ─── Hub stats bar ──────────────────────────────────────────────── */

.hub-stats-bar {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.hub-stats-bar__item--source {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

@media (max-width: 767px) {
    .hub-stats-bar {
        gap: 0.75rem;
        font-size: 0.8125rem;
    }
    .hub-stats-bar__item--source {
        margin-left: 0;
        width: 100%;
    }
}

/* ─── Hub name grid spacing ───────────────────────────────────────── */

.name-grid--hub-results {
    margin-top: var(--space-xl);
}

.hub-empty-msg {
    padding-block: var(--space-2xl);
    color: var(--text-tertiary);
}

/* ─── Popular page: By State index section ────────────────────────── */

.state-index-section {
    margin-top: var(--space-3xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--border-light);
}

.state-index-section__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: var(--weight-regular);
    margin-bottom: var(--space-sm);
}

.state-index-section__intro {
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
    max-width: 600px;
}

/* lang-home page layout helpers (replaces inline styles) */
.hub-hero--centered {
    text-align: center;
    padding-block: var(--space-2xl);
}

.hub-hero__intro--constrained {
    margin-top: var(--space-md);
    max-width: 600px;
    margin-inline: auto;
}

.hub-hero__cta-row {
    margin-top: var(--space-xl);
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.section--spaced-top {
    margin-top: var(--space-2xl);
}

.name-grid--spaced-top {
    margin-top: var(--space-lg);
}

.footer-col__more--spaced {
    display: inline-flex;
    margin-top: var(--space-lg);
}

/* Responsive */
@media (max-width: 767px) {
    .hub-hero {
        padding-block: var(--space-xl);
    }

    .hub-hero--centered {
        padding-block: var(--space-xl);
    }

    .filter-controls {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Hub Pagination */
.hub-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: center;
    margin-block: var(--space-2xl);
}

.hub-pagination__page,
.hub-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding-inline: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
}

.hub-pagination__page:hover,
.hub-pagination__btn:hover {
    background-color: var(--color-surface-raised);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.hub-pagination__page--active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    pointer-events: none;
}

.hub-pagination__ellipsis {
    padding-inline: var(--space-xs);
    color: var(--color-text-muted);
}

.hub-pagination__info {
    width: 100%;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-block-start: var(--space-xs);
}

/* ─── Hub Filter Panels ──────────────────────────────────────────────────────── */

/* Layout: sidebar + main grid */
.hub-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-xl);
    align-items: start;
}

@media (max-width: 959px) {
    .hub-layout {
        grid-template-columns: 1fr;
    }
}

/* Sidebar */
.hub-sidebar {
    position: sticky;
    top: calc(var(--header-height, 64px) + var(--space-md));
}

@media (max-width: 959px) {
    .hub-sidebar {
        position: static;
    }
}

/* Filter group (accordion) */
.hub-filter-group {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-sm);
    background: var(--bg-card);
}

/* Filter group header — the clickable toggle */
.hub-filter-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-md);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text);
    text-align: left;
    transition: color var(--transition-fast), background var(--transition-fast);
    gap: var(--space-sm);
}

.hub-filter-group__header:hover {
    color: var(--accent);
    background: var(--accent-bg);
}

.hub-filter-group__header:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Chevron icon — rotates when open */
.hub-filter-group__chevron {
    flex-shrink: 0;
    transition: transform var(--transition-fast);
    color: var(--text-tertiary);
}

.hub-filter-group.is-open .hub-filter-group__chevron {
    transform: rotate(180deg);
}

/* Panel body */
.hub-filter-group__body {
    padding: 0 var(--space-md) var(--space-md);
    display: none;
}

.hub-filter-group.is-open .hub-filter-group__body {
    display: block;
}

/* Letter pills inside filter panel */
.hub-filter-letters {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.hub-filter-letters a,
.hub-filter-letters span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: var(--weight-medium);
    text-decoration: none;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.hub-filter-letters a:hover {
    background: var(--accent-bg);
    color: var(--accent);
}

.hub-filter-letters a.is-active {
    background: var(--accent);
    color: #fff;
}

.hub-filter-letters span {
    opacity: 0.25;
    cursor: default;
}

/* Origin list inside filter panel */
.hub-filter-origins {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hub-filter-origins a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.hub-filter-origins a:hover {
    background: var(--accent-bg);
    color: var(--accent);
}

.hub-filter-origins a.is-active {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: var(--weight-semibold);
}

.hub-filter-origins__count {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
}

/* Style (syllable count) pills */
.hub-filter-style {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hub-filter-style__btn {
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.hub-filter-style__btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.hub-filter-style__btn.is-active {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: var(--weight-semibold);
}

.hub-filter-style__btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Clear filters link */
.hub-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--space-md);
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color var(--transition-fast);
}

.hub-filter-clear:hover {
    color: var(--accent);
}

.hub-filter-clear[hidden] {
    display: none;
}

/* Mobile: collapsible filter bar */
@media (max-width: 959px) {
    .hub-sidebar {
        border: 1px solid var(--border-light);
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .hub-sidebar__mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--space-md);
        background: var(--bg-card);
        border: none;
        cursor: pointer;
        font-size: 0.9375rem;
        font-weight: var(--weight-semibold);
        color: var(--text);
    }

    .hub-sidebar__mobile-toggle .hub-filter-group__chevron {
        transition: transform var(--transition-fast);
    }

    .hub-sidebar.is-open .hub-sidebar__mobile-toggle .hub-filter-group__chevron {
        transform: rotate(180deg);
    }

    .hub-sidebar__panels {
        display: none;
        padding: var(--space-md);
        background: var(--bg-card);
    }

    .hub-sidebar.is-open .hub-sidebar__panels {
        display: block;
    }
}

@media (min-width: 960px) {
    .hub-sidebar__mobile-toggle {
        display: none;
    }

    .hub-sidebar__panels {
        display: block !important;
    }
}

.hub-rising {
    margin-top: var(--space-3xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--border-light);
}

.hub-rising__title {
    margin-bottom: var(--space-sm);
}

.hub-rising__intro {
    margin-bottom: var(--space-xl);
    color: var(--text-secondary);
}


/* === blog.css === */
/* Blog Styles */

/* ─── Blog Archive (home.php) ────────────────────────────────────── */

.blog-archive {
    padding-block: var(--space-2xl);
}

.blog-archive__hero {
    max-width: 640px;
    margin-bottom: var(--space-2xl);
}

.blog-archive__eyebrow {
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: var(--space-sm);
}

.blog-archive__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: var(--space-md);
}

.blog-archive__intro {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

/* 2-column layout: main + sidebar */
.blog-archive__layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-2xl);
    align-items: start;
}

@media (max-width: 900px) {
    .blog-archive__layout {
        grid-template-columns: 1fr;
    }
}

/* ─── Post card (vertical — large featured image) ─────────────────── */

.blog-post-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.blog-post-row {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.blog-post-row:hover {
    box-shadow: var(--shadow-elevated);
    border-color: var(--accent-light, var(--border));
}

.blog-post-row__image-link {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex-shrink: 0;
}

.blog-post-row__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.blog-post-row:hover .blog-post-row__image {
    transform: scale(1.03);
}

.blog-post-row__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
}

.blog-post-row__category {
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    text-decoration: none;
}

.blog-post-row__category:hover {
    color: var(--accent-dark, var(--text));
}

.blog-post-row__title {
    font-size: 1.25rem;
    font-weight: var(--weight-semibold);
    line-height: 1.35;
    margin: 0;
}

.blog-post-row__title a {
    color: var(--text);
    text-decoration: none;
}

.blog-post-row__title a:hover {
    color: var(--accent);
}

.blog-post-row__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3em 0.6em;
    font-size: var(--text-caption);
    color: var(--text-tertiary);
}

.blog-post-row__excerpt {
    font-size: var(--text-small);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.blog-post-row__more {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--accent);
    text-decoration: none;
    margin-top: var(--space-xs);
}

.blog-post-row__more:hover {
    gap: 0.5em;
}

.blog-archive__empty {
    color: var(--text-tertiary);
    font-style: italic;
}

/* responsive — already vertical, nothing to override */

/* ─── Sidebar ─────────────────────────────────────────────────────── */

.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    position: sticky;
    top: calc(var(--header-height, 64px) + var(--space-md));
}

.blog-sidebar__block {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.blog-sidebar__heading {
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-md);
}

/* Author card */
.blog-sidebar__author-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.blog-sidebar__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-warm);
}

.blog-sidebar__author-name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-body);
    margin: 0 0 2px;
}

.blog-sidebar__author-role {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
    margin: 0;
}

.blog-sidebar__author-bio {
    font-size: var(--text-small);
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* Lists (recent posts, categories) */
.blog-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.blog-sidebar__link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: var(--text);
    font-size: var(--text-small);
    line-height: 1.4;
    transition: color var(--transition-fast);
}

.blog-sidebar__link:hover {
    color: var(--accent);
}

.blog-sidebar__link-date {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
}

.blog-sidebar__cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: var(--text-small);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border-light);
    transition: color var(--transition-fast);
}

.blog-sidebar__cat-link:hover {
    color: var(--accent);
}

.blog-sidebar__cat-count {
    font-size: var(--text-caption);
    color: var(--text-tertiary);
}

/* Tags */
.blog-sidebar__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.blog-sidebar__tag {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: var(--text-caption);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.blog-sidebar__tag:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Newsletter */
.blog-sidebar__newsletter-intro {
    font-size: var(--text-small);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
    line-height: 1.55;
}

.blog-sidebar__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.blog-sidebar__input {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
    font-family: inherit;
    background: var(--bg);
    color: var(--text);
    width: 100%;
    box-sizing: border-box;
}

.blog-sidebar__input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.blog-sidebar__submit {
    padding: var(--space-sm) var(--space-lg);
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.blog-sidebar__submit:hover {
    background: var(--accent-dark, var(--text));
}

.blog-sidebar__ad {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px) {
    .blog-sidebar {
        position: static;
    }
}

/* ─── Single post ─────────────────────────────────────────────────── */

.blog-post {
    max-width: 780px;
}

.blog-post__header {
    margin-bottom: var(--space-2xl);
}

.blog-post__category {
    display: inline-block;
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    margin-bottom: var(--space-md);
}

.blog-post__title {
    margin-bottom: var(--space-md);
}

.blog-post__meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--text-small);
    color: var(--text-tertiary);
}

.blog-post__featured-image {
    width: 100%;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2xl);
}

/* Blog content formatting */
.blog-post__content {
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

.blog-post__content h2 {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}

.blog-post__content h3 {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}

.blog-post__content img {
    border-radius: var(--radius-md);
    margin-block: var(--space-lg);
}

/* Blog card in listing */
.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.blog-card:hover {
    box-shadow: var(--shadow-elevated);
    border-color: var(--accent-light);
}

.blog-card__image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}

.blog-card__content {
    padding: var(--space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-card__category {
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    margin-bottom: var(--space-sm);
}

.blog-card__title {
    margin-bottom: var(--space-sm);
}

.blog-card__excerpt {
    font-size: var(--text-small);
    color: var(--text-secondary);
    flex: 1;
}

.blog-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
    font-size: var(--text-caption);
    color: var(--text-tertiary);
}

/* Author bio */
.author-bio {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--bg-warm);
    border-radius: var(--radius-md);
    margin-top: var(--space-2xl);
}

.author-bio__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.author-bio__name {
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-xs);
}

.author-bio__description {
    font-size: var(--text-small);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

/* Related posts */
.related-posts {
    margin-top: var(--space-2xl);
}

.related-posts__title {
    margin-bottom: var(--space-lg);
}

@media (max-width: 767px) {
    .author-bio {
        flex-direction: column;
        text-align: center;
    }

    .author-bio__avatar {
        margin-inline: auto;
    }
}

/* ─── Static pages (About, Methodology, Privacy) ─────────────────── */

.static-page {
    padding-block: var(--space-xl);
}

.static-page__inner {
    max-width: 780px;
}

.static-page__head {
    margin-bottom: var(--space-2xl);
}

.static-page__eyebrow {
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: var(--space-md);
}

.static-page__title {
    margin-bottom: var(--space-lg);
}

.static-page__title em {
    font-style: italic;
    color: var(--accent);
}

.static-page__lede {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.static-page__body {
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

.static-page__body h2 {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}

.static-page__body p {
    margin-bottom: var(--space-md);
}

.static-page__body ul,
.static-page__body ol {
    padding-left: var(--space-lg);
    margin-bottom: var(--space-md);
}

.static-page__body li {
    margin-bottom: var(--space-xs);
}

.static-page__body a {
    color: var(--accent);
    transition: color var(--transition-fast);
}

.static-page__body a:hover {
    color: var(--text);
}

.static-page__note {
    margin-top: var(--space-2xl);
    padding: var(--space-lg);
    background: var(--bg-warm);
    border-radius: var(--radius-md);
}

/* ─── Author box (E-E-A-T signal) ──────────────────────────────────────── */
.author-box {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--space-lg);
    margin: var(--space-2xl) 0;
    padding: var(--space-lg);
    background: var(--bg-subtle, #faf9f7);
    border: 1px solid var(--border, #ede8e2);
    border-radius: var(--radius-md);
}
.author-box__photo img {
    width: 120px; height: 120px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.author-box__body { display: flex; flex-direction: column; gap: 6px; }
.author-box__label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin: 0;
}
.author-box__name {
    font-family: var(--font-display, 'Instrument Serif', serif);
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.1;
}
.author-box__name a { color: var(--text-primary); text-decoration: none; }
.author-box__name a:hover { color: var(--accent); }
.author-box__title {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    font-style: italic;
}
.author-box__bio {
    font-size: 0.9375rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 8px 0 0;
}
.author-box__creds {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}
.author-box__creds li { position: relative; padding-left: 14px; }
.author-box__creds li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}
@media (max-width: 640px) {
    .author-box { grid-template-columns: 80px 1fr; gap: var(--space-md); padding: var(--space-md); }
    .author-box__photo img { width: 80px; height: 80px; }
    .author-box__name { font-size: 1.25rem; }
}


/* Footer anchor ad slot */
.has-footer-anchor { padding-bottom: 54px; }
@media (min-width: 641px) { .has-footer-anchor { padding-bottom: 94px; } }

/* ── Homepage US State Heatmap ────────────────────────────────────────────── */

.hp-state-map {
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-3xl);
}

.hp-state-map__header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.hp-state-map__title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hp-state-map__sub {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.hp-state-map__wrap,
.hp-state-map__view--map {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.hp-state-map__wrap svg,
.hp-state-map__view--map svg {
    width: 100%;
    height: auto;
    display: block;
    transform: translateX(3%);
}

/* State path defaults */
.us-state {
    fill: var(--color-map-empty, #e8e0d8);
    stroke: var(--bg-primary, #fff);
    stroke-width: 0.8;
    cursor: pointer;
    transition: fill 0.15s ease, opacity 0.15s ease;
}

.us-state:hover,
.us-state:focus {
    opacity: 0.8;
    outline: none;
    stroke: var(--accent);
    stroke-width: 1.5;
}

/* Heatmap tiers — rank 1 = darkest accent, 10+ = lightest */
.us-state[data-rank="1"]  { fill: var(--accent); }
.us-state[data-rank="2"]  { fill: color-mix(in srgb, var(--accent) 85%, white); }
.us-state[data-rank="3"]  { fill: color-mix(in srgb, var(--accent) 70%, white); }
.us-state[data-rank="4"]  { fill: color-mix(in srgb, var(--accent) 55%, white); }
.us-state[data-rank="5"]  { fill: color-mix(in srgb, var(--accent) 43%, white); }
.us-state[data-rank="6"]  { fill: color-mix(in srgb, var(--accent) 33%, white); }
.us-state[data-rank="7"]  { fill: color-mix(in srgb, var(--accent) 25%, white); }
.us-state[data-rank="8"]  { fill: color-mix(in srgb, var(--accent) 18%, white); }
.us-state[data-rank="9"]  { fill: color-mix(in srgb, var(--accent) 13%, white); }
.us-state[data-rank="10+"]     { fill: color-mix(in srgb, var(--accent) 9%, white); }
.us-state[data-rank="has-data"] { fill: color-mix(in srgb, var(--accent) 55%, white); }

/* Tooltip */
.hp-state-map__tooltip {
    position: fixed;
    background: var(--text-primary);
    color: var(--bg-primary);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.8125rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease;
    z-index: 100;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hp-state-map__tooltip.is-visible {
    opacity: 1;
}

.hp-state-map__tooltip-state {
    font-weight: 600;
}

.hp-state-map__tooltip-tops {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* State name labels rendered directly on SVG */
.hp-state-label {
    font-size: 7.5px;
    font-family: var(--font-sans, sans-serif);
    font-weight: 600;
    fill: #fff;
    paint-order: stroke fill;
    stroke: rgba(0,0,0,0.35);
    stroke-width: 2.5px;
    stroke-linejoin: round;
    pointer-events: none;
    dominant-baseline: middle;
}

/* Legend */
.hp-state-map__legend {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-lg);
}

.hp-state-map__legend-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.hp-state-map__legend-bar {
    width: 140px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, var(--accent), color-mix(in srgb, var(--accent) 9%, white));
}

@media (max-width: 767px) {
    .hp-state-map { display: none; }
}

/* Name-color legend */
.hp-state-map__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: center;
    margin-top: var(--space-md);
    font-size: var(--text-small);
}

.hp-state-map__legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.hp-state-map__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}