/* ==========================================================================
   Birthdays site — extra components on top of style.css (same rules apply:
   #000 / #fff text, one text size, gap not margin, 1px lines,
   no bold, no shadow)
   ========================================================================== */

.stack--lg { gap: 48px; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.section-head__side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap);
}

.section-head--center {
    align-items: center;
    text-align: center;
}

.section-head--center .eyebrow { align-self: center; }

.faq__inner--narrow {
    width: min(100%, 920px);
    gap: 40px;
}

.empty-note {
    padding: 28px;
    background: var(--brand-tint);
    border-radius: var(--radius);
}

.day-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

@keyframes spin { to { rotate: 360deg; } }

/* ---------- Photos ---------- */
.photo {
    position: relative;
    display: block;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--brand-tint);
    border-radius: calc(var(--radius) - 6px);
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.photo--profile { aspect-ratio: 4 / 5; width: 100%; border-radius: var(--radius); }

.photo--thumb {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

.photo--face {
    width: 44px;
    height: 44px;
    border: 2px solid var(--white);
    border-radius: 50%;
}

.photo--empty {
    display: grid;
    place-items: center;
    font-family: var(--font-serif);
    font-size: var(--h4);
    color: var(--white);
    background: var(--brand);
}

.photo--thumb.photo--empty,
.photo--face.photo--empty { font-size: var(--fs-body); }

/* ---------- Flags ---------- */
.flag {
    display: block;
    flex-shrink: 0;
    width: 56px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--brand-tint);
}

.flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flag--lg {
    width: 104px;
    border-radius: 16px;
}

/* ---------- Person card ----------
   Photo fills the card, category badge top left, name at the bottom.
   Hover: the short text opens below the name (pushing it up), and closes
   again when the pointer leaves. Touch screens show it open. */
.pcard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
}

.pcard {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    color: var(--white);
    background: var(--brand);
    border-radius: var(--radius);
    isolation: isolate;
}

.pcard .photo {
    position: absolute;
    inset: 0;
    border-radius: 0;
}

.pcard::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(17, 17, 17, 0) 35%, rgba(17, 17, 17, 0.92) 100%);
    transition: background-color var(--t-card);
}

.pcard:hover::after { background-color: rgba(17, 17, 17, 0.35); }

.pcard__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    max-width: calc(100% - 32px);
    padding: 6px 14px;
    overflow: hidden;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--black);
    background: var(--white);
    border-radius: var(--pill);
}

.pcard__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.pcard__name {
    font-family: var(--font-serif);
    font-size: var(--h4);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.pcard__more {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--t-card), opacity var(--t-card);
}

.pcard__inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
}

.pcard__text { padding-top: 12px; }

.pcard__cta {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.pcard__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.pcard__cta span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--black);
    background: var(--white);
    border-radius: 50%;
}

.pcard__cta svg { width: 14px; height: 14px; }

.pcard:hover .pcard__more,
.pcard:focus-visible .pcard__more {
    grid-template-rows: 1fr;
    opacity: 1;
}

@media (hover: none) {
    .pcard__more { grid-template-rows: 1fr; opacity: 1; }
    .pcard__cta { display: none; }
    .pcard::after { background-color: rgba(17, 17, 17, 0.2); }
}

/* Load more: same button as the main site (two sliding arrows).
   While the next cards load, the arrows turn into a spinner. */
.load-more {
    display: flex;
    justify-content: center;
}

.load-more .spin {
    position: absolute;
    inset: 11px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0;
}

.load-more .is-loading { pointer-events: none; }
.load-more .is-loading .btn__arrow svg { opacity: 0; }
.load-more .is-loading .spin { opacity: 1; animation: spin 0.7s linear infinite; }

/* Profile not written yet: grey photo, no hover, "Coming soon" badge */
.pcard--soon { cursor: default; }
.pcard--soon .photo img { filter: grayscale(1) contrast(0.85); opacity: 0.55; }
.pcard--soon::after,
.pcard--soon:hover::after { background: linear-gradient(180deg, rgba(17, 17, 17, 0.15) 35%, rgba(17, 17, 17, 0.88) 100%); }
.pcard__soon { padding-top: 8px; opacity: 0.75; }
.pcard__marquee {
    position: absolute;
    left: -10%;
    right: -10%;
    top: 50%;
    z-index: 2;
    display: flex;
    overflow: hidden;
    padding: 12px 0;
    color: var(--black);
    background: var(--white);
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
    transform: translateY(-50%) rotate(-6deg);
    box-shadow: 0 10px 30px rgba(17, 17, 17, 0.35);
}
.pcard__track {
    display: flex;
    flex: none;
    align-items: center;
    gap: 18px;
    padding-right: 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    animation: soon-marquee 16s linear infinite;
}
.pcard__dot { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.pcard--soon:hover .pcard__track { animation-play-state: paused; }
@keyframes soon-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pcard__track { animation: none; } }

.pcard.is-new { animation: card-in 0.5s var(--ease) both; animation-delay: calc(var(--k, 0) * 60ms); }

@keyframes card-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------- Home hero: one of today's people ---------- */
.hero-card {
    width: 100%;
    max-width: 460px;
    justify-self: end;
}

.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    width: 100%;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.stat-row li {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-row__num {
    font-family: var(--font-serif);
    font-size: var(--h3);
    line-height: 1;
}

/* ---------- Simple person list (upcoming birthdays) ---------- */
.prow-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
}

.prow {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 160px 200px 42px;
    align-items: center;
    gap: var(--gap);
    padding: 16px 12px;
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius);
    transition: background-color var(--t-card), color var(--t-card);
}

.prow__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.prow__who span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.prow__name {
    font-family: var(--font-serif);
    font-size: var(--h5);
}

.prow__arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--white);
    background: var(--brand);
    border-radius: 50%;
    transition: background-color var(--t-card), color var(--t-card);
}

.prow__arrow svg { width: 14px; height: 14px; }

.prow:hover {
    color: var(--white);
    background: var(--brand);
}

.prow:hover .prow__arrow {
    color: var(--black);
    background: var(--white);
}

/* ---------- Countries ---------- */
.country-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.country-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: background-color var(--t-card), color var(--t-card), border-color var(--t-card);
}

.country-item__text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.country-item__text span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.country-item__name {
    font-family: var(--font-serif);
    font-size: var(--h6);
}

.country-item__arrow {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    color: var(--white);
    background: var(--brand);
    border-radius: 50%;
    transition: background-color var(--t-card), color var(--t-card);
}

.country-item__arrow svg { width: 13px; height: 13px; }

.country-item:hover {
    color: var(--white);
    background: var(--brand);
    border-color: var(--brand);
}

.country-item:hover .flag { border-color: var(--line-dark); }

.country-item:hover .country-item__arrow {
    color: var(--black);
    background: var(--white);
}

.country-item[hidden],
.letter-group[hidden] { display: none; }

.letter-group {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: start;
    gap: var(--gap);
    padding-top: 32px;
    border-top: 1px solid var(--line);
}

.letter-group__letter {
    font-size: var(--h2);
    line-height: 1;
}

.letter-group .country-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.country-search {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(100%, 520px);
    min-height: 56px;
    padding: 0 22px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--pill);
}

.country-search svg { width: 20px; height: 20px; flex-shrink: 0; }

.country-search input {
    flex: 1;
    min-width: 0;
    height: 54px;
    font: inherit;
    color: var(--black);
    background: none;
    border: 0;
    outline: none;
}

.country-search:focus-within { border-color: var(--brand); }

/* Letter / month jump links */
.month-jump {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.month-jump__link {
    display: grid;
    place-items: center;
    min-width: 52px;
    height: 44px;
    padding: 0 14px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--pill);
    transition: background-color var(--t), color var(--t), border-color var(--t);
}

.month-jump__link:hover,
.month-jump__link.is-current {
    color: var(--white);
    background: var(--brand);
    border-color: var(--brand);
}

/* ---------- Country page: category index ---------- */
.cat-index {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
}

.cat-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto 140px 46px;
    align-items: center;
    gap: var(--gap);
    padding: 22px 16px;
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius);
    transition: background-color var(--t-card), color var(--t-card);
}

.cat-row__num { opacity: 0.55; }

.cat-row__name {
    font-family: var(--font-serif);
    font-size: var(--h3);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.cat-row__faces { display: flex; }

.cat-row__faces .photo + .photo { margin-left: -12px; }

.cat-row__count { text-align: right; }

.cat-row__arrow {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: var(--white);
    background: var(--brand);
    border-radius: 50%;
    transition: background-color var(--t-card), color var(--t-card);
}

.cat-row__arrow svg { width: 15px; height: 15px; }

.cat-row:hover {
    color: var(--white);
    background: var(--brand);
}

.cat-row:hover .cat-row__num { opacity: 0.8; }

.cat-row:hover .photo--face { border-color: var(--brand); }

.cat-row:hover .cat-row__arrow {
    color: var(--black);
    background: var(--white);
}

/* ---------- Months (home) ---------- */
.month-tiles {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.month-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: background-color var(--t-card), color var(--t-card), border-color var(--t-card);
}

.month-tile__num { opacity: 0.55; }

.month-tile__name {
    font-family: var(--font-serif);
    font-size: var(--h5);
    line-height: 1.2;
}

.month-tile__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    transition: border-color var(--t-card);
}

.month-tile__arrow {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    color: var(--white);
    background: var(--brand);
    border-radius: 50%;
    transition: background-color var(--t-card), color var(--t-card);
}

.month-tile__arrow svg { width: 12px; height: 12px; }

.month-tile:hover,
.month-tile.is-current {
    color: var(--white);
    background: var(--brand);
    border-color: var(--brand);
}

.month-tile:hover .month-tile__foot,
.month-tile.is-current .month-tile__foot { border-top-color: var(--line-dark); }

.month-tile:hover .month-tile__arrow,
.month-tile.is-current .month-tile__arrow {
    color: var(--black);
    background: var(--white);
}

/* ---------- Calendar ---------- */
.month-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
}

.month {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.month__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.month__title { font-size: var(--h4); }

.month__count { opacity: 0.65; white-space: nowrap; }

.month__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.month__day {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background: var(--brand-tint);
    border-radius: 10px;
    transition: background-color var(--t), color var(--t);
}

a.month__day:hover,
.month__day.is-today {
    color: var(--white);
    background: var(--brand);
}

.month__day.is-empty { opacity: 0.35; }

.month.is-current { border-color: var(--brand); }

/* ---------- Profile ---------- */
.profile-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 64px;
}

.profile-hero__photo {
    position: relative;
    display: flex;
}

.profile-hero__badge {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 8px 18px;
    line-height: 1.2;
    color: var(--black);
    background: var(--white);
    border-radius: var(--pill);
    transition: background-color var(--t), color var(--t);
}

.profile-hero__badge:hover {
    color: var(--white);
    background: var(--brand);
}

.profile-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.profile-hero__content .breadcrumb ol { justify-content: flex-start; }

.profile-hero__lead { max-width: 620px; }

.profile-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.profile-body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 64px;
}

.prose__h3 { font-size: var(--h4); padding-top: 12px; }

.facts-card {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap);
    padding: 28px;
    background: var(--brand-tint);
    border-radius: var(--radius);
}

.facts-card__title { font-size: var(--h4); }

.facts-card__list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.facts-card__row {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.site-main > .section:nth-of-type(odd) .facts-card { background: var(--white); }

/* Back button: arrows point left */
.btn--back .btn__arrow svg { transform: scaleX(-1); }

/* ---------- Countries list: flag card, name + arrow below ---------- */
.country-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
}

.country-tile {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 12px 18px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color var(--t-card), transform var(--t-card), box-shadow var(--t-card);
}

.flag.flag--tile {
    width: 100%;
    aspect-ratio: 3 / 2;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) - 6px);
}

.country-tile__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 6px;
}

.country-tile__name {
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-serif);
    font-size: var(--h6);
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.country-tile__arrow {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: background-color var(--t-card), color var(--t-card), border-color var(--t-card);
}

.country-tile__arrow svg { width: 13px; height: 13px; }

.country-tile:hover {
    border-color: var(--brand);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.35);
}

.country-tile:hover .country-tile__arrow {
    color: var(--white);
    background: var(--brand);
    border-color: var(--brand);
}

/* ---------- Country / category intro: title left, flag right ---------- */
.country-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 64px;
}

.country-intro__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.flag--map {
    width: 100%;
    max-width: 460px;
    aspect-ratio: 3 / 2;
    justify-self: end;
    border-radius: var(--radius);
}

/* ---------- Category boxes ---------- */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
}

.cat-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: background-color var(--t-card), color var(--t-card), border-color var(--t-card);
}

.cat-card__title {
    font-family: var(--font-serif);
    font-size: var(--h4);
    line-height: 1.15;
}

.cat-card__text {
    flex: 1;
    padding-bottom: 18px;
    opacity: 0.75;
    border-bottom: 1px solid var(--line);
}

.cat-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cat-card__link span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--white);
    background: var(--brand);
    border-radius: 50%;
    transition: background-color var(--t-card), color var(--t-card);
}

.cat-card__link svg { width: 13px; height: 13px; }

.cat-card:hover {
    color: var(--white);
    background: var(--brand);
    border-color: var(--brand);
}

.cat-card:hover .cat-card__text { border-bottom-color: var(--line-dark); }

.cat-card:hover .cat-card__link span {
    color: var(--black);
    background: var(--white);
}

/* ---------- Profile hero: 4 key points, 2 per row ---------- */
.profile-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 620px;
    border-top: 1px solid var(--line);
}

.profile-points div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.profile-points div:nth-child(odd) { padding-right: 20px; }

.profile-points dt { opacity: 0.6; }

/* ---------- Footer ---------- */
.site-footer__grid--people { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }

.foot-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.foot-link span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--black);
    background: var(--white);
    border-radius: 50%;
    transition: background-color var(--t), color var(--t);
}

.foot-link svg { width: 15px; height: 15px; }

.foot-link:hover span {
    color: var(--white);
    background: var(--black);
    box-shadow: inset 0 0 0 1.5px var(--white);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .hero-card { justify-self: start; }
    .country-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .country-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .letter-group .country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .month-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .prow { grid-template-columns: 56px minmax(0, 1fr) 140px 170px 42px; }
}

@media (max-width: 1023px) {
    .stack--lg { gap: 36px; }

    .pcard-grid,
    .month-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }


    .profile-hero__grid,
    .profile-body { grid-template-columns: minmax(0, 1fr); gap: 36px; }

    .profile-hero__photo { max-width: 420px; }

    .facts-card { position: static; }

    .country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .prow { grid-template-columns: 56px minmax(0, 1fr) auto 42px; }
    .prow__age { display: none; }

    .cat-row { grid-template-columns: 40px minmax(0, 1fr) auto 46px; }
    .cat-row__count { display: none; }
    .cat-row__name { font-size: var(--h4); }

    .site-footer__grid--people { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .country-tiles,
    .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .country-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .flag--map { justify-self: start; }
}

@media (max-width: 767px) {
    .letter-group { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 24px; }
    .letter-group .country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .month-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .stack--lg { gap: 28px; }

    .stat-row { gap: 12px 28px; padding-top: var(--gap); }

    .pcard-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .pcard { aspect-ratio: 1; }
    .pcard__body { padding: 18px; }
    .pcard__badge { top: 14px; left: 14px; }

    .hero-card { max-width: none; }

    .prow { grid-template-columns: 48px minmax(0, 1fr) 36px; gap: 12px; padding: 12px 6px; }
    .prow .photo--thumb { width: 48px; height: 48px; }
    .prow__when { display: none; }
    .prow__arrow { width: 36px; height: 36px; }

    .country-grid,
    .letter-group .country-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .country-item { padding: 12px; }
    .flag { width: 48px; }
    .flag--lg { width: 88px; }

    .cat-row { grid-template-columns: minmax(0, 1fr) auto 40px; gap: 12px; padding: 16px 6px; }
    .cat-row__num { display: none; }
    .cat-row__arrow { width: 40px; height: 40px; }
    .photo--face { width: 36px; height: 36px; }

    .month-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .month-tile { padding: 16px; }

    .month-grid { grid-template-columns: minmax(0, 1fr); }
    .month { padding: 18px; }

    .month-jump__link { min-width: 46px; height: 40px; padding: 0 10px; }

    .profile-hero__photo { max-width: none; }
    .profile-hero__actions { width: 100%; }
    .profile-hero__actions .btn { flex: 1 1 auto; justify-content: space-between; }

    .facts-card { padding: 20px; }
    .facts-card__row { grid-template-columns: 100px minmax(0, 1fr); }

    .site-footer__grid--people { grid-template-columns: 1fr 1fr; }

    .country-tiles { gap: 10px; }
    .country-tile { padding: 8px 8px 12px; gap: 12px; }
    .country-tile__foot { padding: 0 4px; }
    .country-tile__arrow { width: 30px; height: 30px; }
    .cat-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .cat-card { padding: 22px; }
    .flag--map { max-width: none; }
    .profile-points div:nth-child(odd) { padding-right: 12px; }
}

/* Flag in the hero of country / category pages */
.page-hero__inner > .flag.flag--lg { width: 96px; }


/* Section heads: the text on the right is always two lines */
@media (min-width: 1024px) {
    .section-head__row p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

/* Flags: the same 10px corners everywhere (hero, tiles, cards) */
.flag,
.flag--lg,
.flag.flag--tile,
.flag--map { border-radius: 10px; }

/* Home hero: wider text on the left, card on the right stays the same */
.home-hero .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 48px;
}

.home-hero .hero__lead { max-width: 640px; }

@media (max-width: 1199px) {
    .home-hero .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .home-hero .hero-card { justify-self: start; max-width: 460px; }
}

@media (max-width: 575px) {
    .home-hero .hero-card { max-width: none; }
    .load-more .btn { width: 100%; }
}

/* Home hero: outlined second button, stats as three equal columns */
.btn--line { border-color: var(--black); }

.home-hero .stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.home-hero .stat-row li { padding-right: 20px; }

.home-hero .stat-row li + li {
    padding-left: 20px;
    border-left: 1px solid var(--line);
}

/* Small screens: the photo card comes first, buttons full width */
@media (max-width: 1199px) {
    .home-hero .hero-card { order: -1; }
}

@media (max-width: 575px) {
    .home-hero .hero__content { gap: 20px; }
    .home-hero .hero__cta { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
    .home-hero .hero__cta .btn { width: 100%; }
    .home-hero .stat-row { padding-top: 20px; }
    .home-hero .stat-row li { gap: 6px; padding-right: 10px; }
    .home-hero .stat-row li + li { padding-left: 12px; }
    .home-hero .stat-row__num { font-size: var(--h4); }
}

/* Official account links (profile) */
.facts-card__social { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.facts-card__social a { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--pill); }
.facts-card__social a:hover { border-color: var(--brand); color: var(--brand); }

/* Profile: follow + share boxes side by side at the end of the biography */
.bio-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.bio-links--single { grid-template-columns: minmax(0, 1fr); }

.bio-links__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.bio-links__label {
    font-family: var(--font-serif);
    font-size: var(--h6);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.bio-links__label em {
    font-family: var(--font-italic);
    font-style: italic;
    font-weight: 400;
    font-size: 1.08em;
    color: var(--em-on-light);
}

.bio-links__list,
.prose .bio-links__list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.prose .bio-links__list li { padding-left: 0; }
.prose .bio-links__list li::before { display: none; }

.bio-links__item {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--white);
    background: var(--black);
    border: 1px solid var(--black);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.45s var(--ease), color 0.45s var(--ease);
}

.bio-links__item svg { width: 19px; height: 19px; }

.bio-links__item:hover,
.bio-links__item.is-copied {
    color: var(--black);
    background: var(--white);
}

@media (max-width: 767px) {
    .bio-links { grid-template-columns: minmax(0, 1fr); }
}

/* Profile: hub links at the end of the biography */
.explore-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.explore-links__list,
.prose .explore-links__list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.prose .explore-links__list li { padding-left: 0; }
.prose .explore-links__list li::before { display: none; }

.explore-links__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    line-height: 1.2;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    transition: border-color 0.45s var(--ease), background-color 0.45s var(--ease), color 0.45s var(--ease);
}

.explore-links__item svg { width: 14px; height: 14px; }

.explore-links__item:hover {
    color: var(--white);
    background: var(--black);
    border-color: var(--black);
}