/* ==========================================================================
   Top Personalities — design system (Phase A)
   Editorial publication identity: warm paper, dark navy, muted gold,
   deep teal. Original work for toppersonalities.com — deliberately distinct
   from the bright, utilitarian tool-site look of the other 6 sites.
   research/06-design-direction.md §2 is the spec.
   ========================================================================== */

/* --- Self-hosted fonts (white-label fix, M7) -----------------------------
   Fraunces + Inter are served locally from /public/fonts/ — no Google
   Fonts CDN request. Both are variable fonts (latin subset): Fraunces
   opsz 9–144 / wght 100–900, Inter wght 100–900. The weight ranges below
   cover every weight the site uses (Fraunces 500/600/700 + implicit 400;
   Inter 400/500/600/700). SIL OFL 1.1 notices: OFL.txt (Fraunces) and
   OFL-Inter.txt (Inter) in the same directory. --------------------------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/Fraunces-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/Inter-latin.woff2") format("woff2");
}

:root {
  /* Colour tokens */
  --paper: #fdfcf9; /* page background — warm paper white */
  --ink: #14213d; /* dark navy — headings + body text */
  --gold: #b08d2e; /* muted gold — rules, dots, badges, active states */
  --gold-text: #7c6118; /* darker gold for small text (≥4.5:1 on paper) */
  --teal: #1d5c5a; /* deep teal — links, buttons, interactive elements */
  --teal-dark: #144342; /* teal hover state */
  --slate: #6b7280; /* muted meta text, captions, "last verified" labels */
  --card: #ffffff; /* portrait cards, content cards */
  --danger: #9b2c2c; /* "Disputed claim" callouts ONLY */
  --danger-bg: #fdf2f2;
  --gold-bg: #fbf7ec; /* gold callout background */
  --rule: #e5e0d5; /* 1px hairline rules */
  --navy-soft: #1e3257; /* monogram / portrait fallback background lift */

  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    monospace;

  /* Scale (06 §2): hero 44–56px desktop / 32px mobile; H1 36px; H2 26px;
     body 17–18px, line-height 1.7 */
  --text-hero: clamp(2rem, 5vw, 3.5rem);
  --text-h1: 2.25rem; /* 36px */
  --text-h2: 1.625rem; /* 26px */
  --text-h3: 1.25rem; /* 20px */
  --text-body: 1.0625rem; /* 17px */
  --text-small: 0.875rem; /* 14px */
  --text-meta: 0.8125rem; /* 13px */
  --leading-body: 1.7;
  --leading-heading: 1.15;

  /* Layout */
  --max-width: 1200px;
  --column-width: 720px; /* profile article column */
  --radius: 10px; /* portrait cards */
  --space-section: 3rem;
}

/* --- Reset / base ------------------------------------------------------- */

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

/* Polish 2026-11-12 (D-M1): author display rules (e.g. .tool-row
   display:flex) otherwise override the UA [hidden] style, so inactive
   tool panels stayed visible. This restores hidden everywhere. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

a:hover,
a:focus-visible {
  color: var(--teal-dark);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-heading);
  margin: 0 0 0.6em;
  color: var(--ink);
}

h1 {
  font-size: var(--text-h1);
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
}

p {
  margin: 0 0 1.1em;
}

ul,
ol {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
}

li + li {
  margin-top: 0.35em;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-section) 0;
}

blockquote {
  margin: 1.5em 0;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 3px solid var(--gold);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.5;
}

blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-style: normal;
  color: var(--slate);
}

/* --- Layout ------------------------------------------------------------- */

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

.column {
  max-width: var(--column-width);
  margin-inline: auto;
}

/* Profile layout: 720px article column + quick-facts rail on desktop,
   rail stacks below the article on mobile (06 §2). */
.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .profile-layout {
    grid-template-columns: minmax(0, var(--column-width)) 300px;
    justify-content: center;
    align-items: start;
  }

  .profile-layout__rail {
    position: sticky;
    top: 1.5rem;
  }
}

/* --- Header / footer ---------------------------------------------------- */

/* Header redesign 2026-11-13: sticky bar, single-line brand (tagline
   dropped from the header — it still lives in the footer), 5 primary
   links + a "More" dropdown, compact header search. No new colours or
   fonts: paper / navy / gold / teal, Fraunces + Inter. */
html {
  scroll-padding-top: 4.75rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  transition: box-shadow 0.2s ease;
}

.site-header--scrolled {
  box-shadow:
    0 1px 0 var(--rule),
    0 10px 28px rgb(20 33 61 / 0.09);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: 0.6rem;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: none;
  color: var(--ink);
  text-decoration: none;
}

.site-header__brand:hover {
  color: var(--ink);
}

.site-header__brand svg {
  width: 36px;
  height: 36px;
  flex: none;
}

.site-header__wordmark {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
  font-size: var(--text-small);
  font-weight: 500;
}

.site-nav a,
.site-nav__parent {
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__parent {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.site-nav a:hover,
.site-nav__parent:hover {
  background: var(--gold-bg);
  color: var(--ink);
  text-decoration: none;
}

/* Active section: gold underline bar + semibold, no colour change. */
.site-nav a[aria-current="page"] {
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--gold);
  border-radius: 6px 6px 0 0;
}

.site-nav__group.is-active > a,
.site-nav__group.is-active > button {
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--gold);
  border-radius: 6px 6px 0 0;
}

.site-nav__group.is-active > a:hover,
.site-nav__group.is-active > button:hover {
  background: var(--gold-bg);
}

/* Header search: GET form to /explore/?q= (that page filters on ?q=
   client-side; verified ?q=kalam → "Showing 1 of 1"). No JS needed. */
.site-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
}

.site-search input {
  width: 14rem;
  padding: 0.45rem 0.7rem 0.45rem 2rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: var(--text-small);
  color: var(--ink);
  transition:
    width 0.2s ease,
    border-color 0.15s ease;
}

.site-search input::placeholder {
  color: var(--slate);
}

.site-search input:focus {
  width: 15rem;
  border-color: var(--gold);
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.site-search button {
  position: absolute;
  left: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--slate);
  cursor: pointer;
}

.site-search button:hover {
  color: var(--teal);
}

.site-footer {
  margin-top: var(--space-section);
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem 2rem;
  font-size: var(--text-small);
  color: var(--slate);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  justify-content: space-between;
}

.site-footer__brand {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.site-footer a {
  color: var(--teal);
}

/* --- Editorial chrome --------------------------------------------------- */

/* Small-caps gold section eyebrows, e.g. "FEATURED · ENTREPRENEURS" */
.eyebrow {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.section-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

.lede {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.6;
}

/* --- Trust chips -------------------------------------------------------- */

.trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.75rem;
  padding: 0;
  list-style: none;
}

.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  font-size: var(--text-meta);
  font-weight: 500;
  color: var(--slate);
  /* Chips must wrap on narrow screens: a long "Reviewed by …" chip with
     nowrap overflowed the viewport on mobile (Phase A visual QC, 12 Nov 2026). */
  white-space: normal;
  max-width: 100%;
  line-height: 1.4;
  text-align: left;
}

@media (max-width: 639px) {
  .trust-chips {
    gap: 0.4rem;
    margin: 0.75rem 0 1.25rem;
  }

  .trust-chip {
    padding: 0.25rem 0.6rem;
  }
}

.trust-chip__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

.trust-chip--verified .trust-chip__dot {
  background: var(--teal);
}

/* --- Fact-status callouts ---------------------------------------------- */

.fact-callout {
  margin: 1.5em 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--gold);
  border-left-width: 4px;
  border-radius: 0 8px 8px 0;
  background: var(--gold-bg);
}

.fact-callout__label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.fact-callout p {
  margin: 0;
}

.fact-callout__source {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--text-meta);
  color: var(--slate);
}

.fact-callout--disputed {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.fact-callout--disputed .fact-callout__label {
  color: var(--danger);
}

/* --- Monogram / portrait cards ------------------------------------------ */

.portrait {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 1px 3px rgb(20 33 61 / 0.12), 0 8px 24px rgb(20 33 61 / 0.08);
}

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

.portrait__caption {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--slate);
  line-height: 1.5;
  /* The caption prints the full Commons source URL as text; let that long
     unbroken string wrap instead of forcing the page wider than the
     viewport on mobile (Phase D mobile QC). */
  overflow-wrap: anywhere;
}

/* Monogram fallback: initials on navy, gold ring — never a scraped photo. */
.monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--navy-soft), var(--ink));
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 5rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 3px var(--gold);
}

.monogram--small {
  font-size: 1.5rem;
  box-shadow: inset 0 0 0 2px var(--gold);
}

/* --- Quick facts -------------------------------------------------------- */

.quick-facts {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  font-size: var(--text-small);
}

.quick-facts__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}

.quick-facts dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 1rem;
}

.quick-facts dt {
  font-weight: 600;
  color: var(--slate);
  white-space: nowrap;
}

.quick-facts dd {
  margin: 0;
}

.quick-facts__dates {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
}

/* --- Timeline ----------------------------------------------------------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.5rem;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0.5rem;
  width: 1px;
  background: var(--rule);
}

.timeline__item {
  position: relative;
  padding: 0 0 1.5rem 2rem;
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__item::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: calc(0.5rem - 5px);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--paper);
}

.timeline__date {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--gold-text);
  letter-spacing: 0.02em;
}

.timeline__event {
  margin-top: 0.15rem;
}

.timeline__precision {
  font-size: var(--text-meta);
  color: var(--slate);
  font-style: italic;
}

.timeline__source {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--text-meta);
  color: var(--slate);
}

/* --- Profile page ------------------------------------------------------- */

.profile-head {
  text-align: left;
  margin-bottom: 0.5rem;
}

.profile-head__name {
  font-size: var(--text-hero);
  margin-bottom: 0.35rem;
}

.profile-head__roles {
  font-size: 1.125rem;
  color: var(--slate);
  margin-bottom: 0;
}

.profile-head__dates {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--slate);
}

.profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin: 1.75rem 0 2rem;
}

@media (min-width: 640px) {
  .profile-hero {
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: start;
  }
}

/* Polish 2026-11-12 (B-M3): on small screens the 3:4 portrait filled
   the viewport and pushed the lede below the fold. Cap it at 280px,
   left-aligned, and put the lede first. */
@media (max-width: 639px) {
  .profile-hero {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.25rem 0 1.5rem;
  }

  .profile-hero .lede {
    order: -1;
    margin-bottom: 0;
  }

  .profile-hero figure {
    max-width: 280px;
    margin: 0;
  }

  .profile-hero .portrait {
    max-width: 280px;
  }
}

.profile-section {
  margin-top: var(--space-section);
}

.profile-section > h2 {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.faq-item {
  margin-bottom: 1.5rem;
}

.faq-item h3 {
  margin-bottom: 0.3rem;
}

.faq-item__source {
  font-size: var(--text-meta);
  color: var(--slate);
}

.sources-list {
  font-size: var(--text-small);
}

.sources-list li {
  margin-bottom: 0.6rem;
  overflow-wrap: anywhere;
}

.editorial-note {
  font-size: var(--text-small);
  color: var(--slate);
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
}

.related-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.related-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--ink);
}

.related-card:hover {
  border-color: var(--gold);
}

.related-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  display: block;
}

.related-card__role {
  font-size: var(--text-small);
  color: var(--slate);
}

.breadcrumbs {
  font-size: var(--text-meta);
  color: var(--slate);
  margin: 1.25rem 0 1.5rem;
}

.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.breadcrumbs li {
  white-space: nowrap;
}

@media (max-width: 639px) {
  .breadcrumbs li[aria-current="page"] {
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.breadcrumbs li + li::before {
  content: "›";
  margin-right: 0.35rem;
  color: var(--slate);
}

.breadcrumbs a {
  color: var(--slate);
}

/* --- Placeholder page --------------------------------------------------- */

.placeholder {
  padding-block: 3rem;
}

.placeholder__badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold-bg);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* --- Small screens ------------------------------------------------------ */

@media (max-width: 639px) {
  h1 {
    font-size: 2rem; /* 32px mobile hero/H1 */
  }

  .profile-head__name {
    font-size: 2rem;
  }

  :root {
    --space-section: 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   Phase B — homepage, directories, explorer, legal pages, tool/quiz/
   comparison templates. All classes used by Phase B pages; no invented
   content is styled into existence — empty sections hide themselves.
   ========================================================================== */

/* --- Person cards / grids ------------------------------------------------- */

.person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.person-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 1px 3px rgb(20 33 61 / 0.08);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.person-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow:
    0 2px 6px rgb(20 33 61 / 0.1),
    0 10px 28px rgb(20 33 61 / 0.12);
}

/* Grids that wrap cards in <li> (country pages): the <li> must stretch
   so the card inside can fill the row height (A-M1/F-M1). */
.person-grid > li {
  display: flex;
  min-width: 0;
}

.person-grid > li > .person-card {
  flex: 1 1 auto;
  min-width: 0;
}

.person-card__portrait {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--card);
}

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

.person-card__portrait .monogram {
  font-size: 3rem;
}

.person-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0.9rem 1rem 1.1rem;
  min-width: 0;
}

/* Polish 2026-11-12 (A-M1/F-M1): fixed line counts + reserved heights
   make every card in a row the same height regardless of how long the
   name, role or category eyebrow is. */
.person-card__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.3em * 2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.3;
}

.person-card__role {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.5em * 2);
  margin-top: 0.25rem;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--slate);
}

.person-card__category {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.5em * 2);
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* --- Homepage ----------------------------------------------------------- */

.home-hero {
  padding: 3.5rem 0 2.5rem;
  text-align: center;
  border-bottom: 1px solid var(--rule);
}

.home-hero h1 {
  font-size: var(--text-hero);
  margin-bottom: 0.4rem;
}

.home-hero__tagline {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--slate);
  margin-bottom: 1.75rem;
}

.home-search {
  display: flex;
  max-width: 560px;
  margin: 0 auto;
  gap: 0.5rem;
}

.home-search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font: inherit;
  font-size: 1rem;
  background: var(--card);
  color: var(--ink);
}

.home-search input[type="search"]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--teal);
  border-radius: 8px;
  background: var(--teal);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--teal-dark);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--teal);
}

.btn--ghost:hover {
  background: var(--card);
  color: var(--teal-dark);
}

.home-hero__hint {
  margin-top: 0.9rem;
  font-size: var(--text-small);
  color: var(--slate);
}

.home-section {
  padding: 2.75rem 0 0.5rem;
}

.home-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.home-section__head h2 {
  margin: 0;
  padding-bottom: 0.5rem;
}

.home-section__more {
  font-size: var(--text-small);
  font-weight: 600;
  white-space: nowrap;
}

/* Polish 2026-11-12 (A-M3): on mobile the "View all →" link wrapped
   onto its own line under the heading. Stack it deliberately instead. */
@media (max-width: 639px) {
  .home-section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    flex-wrap: nowrap;
  }

  .home-section__head h2 {
    padding-bottom: 0;
  }
}

.home-section__intro {
  color: var(--slate);
  max-width: 720px;
}

/* Category browse cards on the homepage + categories index. */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  color: var(--ink);
}

.category-card:hover {
  border-color: var(--gold);
}

.category-card__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
}

.category-card__desc {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--text-small);
  color: var(--slate);
  line-height: 1.55;
}

.category-card__meta {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--gold-text);
}

.category-card--soon {
  background: transparent;
  border-style: dashed;
}

.category-card--soon .category-card__name {
  color: var(--slate);
}

/* "Coming soon" — honest placeholder state, never a dead link. */
.coming-soon {
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  background: transparent;
  color: var(--slate);
  font-size: var(--text-small);
}

.coming-soon p {
  margin: 0 0 0.6em;
}

.coming-soon p:last-child {
  margin-bottom: 0;
}

/* Editorial resources list on the homepage. */
.resource-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.resource-list a {
  display: block;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--ink);
}

.resource-list a:hover {
  border-color: var(--gold);
}

.resource-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.resource-list span {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--text-small);
  color: var(--slate);
}

/* Today-in-history items. */
.today-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.today-list li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}

.today-list li:last-child {
  border-bottom: 0;
}

.today-list__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--gold-text);
}

.today-list__detail {
  margin-top: 0.2rem;
}

/* --- Directory / index pages -------------------------------------------- */

.page-head {
  padding-top: 0.5rem;
  margin-bottom: 1.75rem;
}

.page-head p {
  color: var(--slate);
  max-width: 720px;
}

.count-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--gold-bg);
  border: 1px solid var(--gold);
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--gold-text);
  vertical-align: middle;
}

.dir-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.dir-list a {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  color: var(--ink);
}

.dir-list a:hover {
  border-color: var(--gold);
}

.dir-list__count {
  font-size: var(--text-small);
  color: var(--slate);
  white-space: nowrap;
}

.dir-list__soon {
  color: var(--slate);
  font-size: var(--text-small);
}

/* --- Pagination ----------------------------------------------------------- */

.pagination {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin: 2.5rem 0 1rem;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.pagination a,
.pagination span {
  display: inline-block;
  min-width: 2.25rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  text-align: center;
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink);
}

.pagination a:hover {
  border-color: var(--gold);
}

.pagination [aria-current="page"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* --- Explorer / search ---------------------------------------------------- */

.explore-layout {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .explore-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
  }
}

.explore-filters {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  font-size: var(--text-small);
}

.explore-filters h2 {
  font-size: 1.05rem;
  margin-bottom: 0.9rem;
}

/* Polish 2026-11-12 (F-M2): the sidebar heading is a 20px section
   label, not a page heading. */
.explore-filters__label {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: var(--leading-heading);
  color: var(--ink);
  margin: 0 0 0.9rem;
}

.explore-filters label {
  display: block;
  font-weight: 600;
  margin: 0.9rem 0 0.3rem;
}

.explore-filters label:first-of-type {
  margin-top: 0;
}

.explore-filters select,
.explore-filters input[type="search"] {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font: inherit;
  font-size: var(--text-small);
  background: var(--paper);
  color: var(--ink);
}

.explore-filters select:focus,
.explore-filters input[type="search"]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.explore-results__meta {
  font-size: var(--text-small);
  color: var(--slate);
  margin-bottom: 1rem;
}

.explore-empty {
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
  color: var(--slate);
  font-size: var(--text-small);
}

.search-suggest {
  position: relative;
}

.search-suggest__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0.3rem 0 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgb(20 33 61 / 0.12);
}

.search-suggest__list button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: var(--text-small);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}

.search-suggest__list button:hover,
.search-suggest__list button:focus-visible {
  background: var(--gold-bg);
}

/* --- Legal / editorial pages -------------------------------------------- */

.legal-page {
  max-width: var(--column-width);
  margin-inline: auto;
}

.legal-page h2 {
  margin-top: 2.25rem;
}

.legal-page .updated {
  font-size: var(--text-small);
  color: var(--slate);
}

/* --- Tool / quiz / comparison templates ---------------------------------- */

.tool-hero {
  padding: 1rem 0 1.5rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.75rem;
}

.tool-box {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.tool-box label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.tool-box input {
  width: 100%;
  max-width: 420px;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font: inherit;
  background: var(--paper);
  color: var(--ink);
}

/* Phase 2 SEO (2026-11-13): the width above also sized radio/checkbox
   inputs to 100%, which made the timeline generator's mode radios 300px
   wide and the page overflow horizontally at 390px. Radios and
   checkboxes keep their native size. */
.tool-box input[type='radio'],
.tool-box input[type='checkbox'] {
  width: auto;
  max-width: none;
  padding: 0;
}

.tool-box select {
  width: 100%;
  max-width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font: inherit;
  background: var(--paper);
  color: var(--ink);
}

/* Polish 2026-11-12 (D-H1): tool-row fields share the row instead of
   sizing to content, so person selects get the full container width. */
.tool-box .tool-row > div:not(.tool-row__btn) {
  flex: 1 1 200px;
  min-width: 0;
}

.tool-box input:focus,
.tool-box select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.tool-result {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--gold);
  border-left-width: 4px;
  border-radius: 0 8px 8px 0;
  background: var(--gold-bg);
}

.tool-result[hidden] {
  display: none;
}

.quiz-box {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  /* Polish 2026-11-12 (E-L1): tighter start card — the old padding left
     a large empty band under the Start button. */
  padding: 1.25rem 1.5rem;
}

.quiz-box #quiz-start p {
  margin-bottom: 0.8em;
}

.quiz-box #quiz-start p:last-child {
  margin-bottom: 0;
}

.quiz-options {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.quiz-options button {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}

.quiz-options button:hover:not(:disabled) {
  border-color: var(--gold);
}

.quiz-options button:disabled {
  cursor: default;
  opacity: 0.85;
}

.quiz-options button.quiz-correct {
  border-color: var(--teal);
  background: #eef6f5;
}

.quiz-options button.quiz-wrong {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.quiz-explanation {
  margin-top: 1rem;
  font-size: var(--text-small);
  color: var(--slate);
}

.quiz-explanation[hidden] {
  display: none;
}

.quiz-score {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--gold-text);
}

/* Phase 2 SEO (item 17): photo-round portrait and Q&A companion list. */
.quiz-photo {
  display: block;
  width: 180px;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  margin: 0.5rem 0 1rem;
}

.quiz-photo[hidden] {
  display: none;
}

.quiz-qa-list li {
  margin-bottom: 0.75em;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

/* Wide comparison tables scroll inside their container on small screens
   instead of forcing the page wider than the viewport (Phase D mobile
   QC — the two-column table's min-content exceeds 350px at 390px wide). */
.compare-scroll {
  position: relative;
}

.compare-scroll__hint {
  display: none;
}

@media (max-width: 639px) {
  .compare-table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }

  /* Polish 2026-11-12 (C-H1): the table could be swiped but nothing
     said so — the third column looked cut off. Visible fade + hint. */
  .compare-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.5rem;
    pointer-events: none;
    background: linear-gradient(
      to left,
      var(--paper) 0%,
      rgb(253 252 249 / 0) 100%
    );
  }

  .compare-scroll__hint {
    display: block;
    margin: 0 0 0.5rem;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--gold-text);
  }
}

.compare-table th,
.compare-table td {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.compare-table th {
  background: var(--card);
  font-family: var(--font-display);
}

.compare-table tr:nth-child(even) td {
  background: rgb(20 33 61 / 0.02);
}

.compare-note {
  font-size: var(--text-small);
  color: var(--slate);
}

.compare-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 639px) {
  .compare-people {
    grid-template-columns: 1fr;
  }
}

/* --- Header nav (desktop + mobile menu) ---------------------------------- */

/* Header redesign 2026-11-13: the hamburger is a 40px icon button
   (bars ⇄ close, swapped by aria-expanded), not a "Menu" text button.
   The desktop nav gives way to it at ≤1100px — at 820px the old 11-link
   row wrapped and crowded, so tablet gets the clean panel too. */

.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle:hover {
  border-color: var(--gold);
}

.nav-toggle__icon-close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon-open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon-close {
  display: block;
}

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

  .site-search {
    display: none;
  }

  .site-nav--open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.25rem 1rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    /* Polish 2026-11-12 (I-1): the open menu was 766px tall; cap it to
       the viewport and scroll inside it instead of pushing the page. */
    max-height: calc(100dvh - 3.5rem);
    overflow-y: auto;
    box-shadow: 0 16px 32px rgb(20 33 61 / 0.16);
  }

  .site-nav--open a,
  .site-nav--open .site-nav__parent {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
  }

  .site-nav--open a:last-child {
    border-bottom: 0;
  }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .site-header {
    position: sticky;
  }
}

.site-nav__group {
  position: relative;
}

.site-nav__group > a::after,
.site-nav__group > button::after {
  content: " ▾";
  font-size: 0.75em;
  color: var(--slate);
}

.site-nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  min-width: 240px;
  margin: 0.4rem 0 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgb(20 33 61 / 0.12);
}

.site-nav__group:hover .site-nav__dropdown,
.site-nav__group:focus-within .site-nav__dropdown,
.site-nav__group--open .site-nav__dropdown {
  display: block;
}

.site-nav__dropdown a {
  display: block;
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
}

.site-nav__dropdown a:hover {
  background: var(--gold-bg);
  color: var(--ink);
  text-decoration: none;
}

/* --- 404 ------------------------------------------------------------------ */

.not-found {
  padding: 4rem 0;
  text-align: center;
  /* Polish 2026-11-12 (H-M1): balance the ~200px empty band above the
     footer by giving the page a minimum height and centring its content. */
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

.not-found__actions .btn {
  flex: 0 1 auto;
  white-space: nowrap;
}

@media (max-width: 639px) {
  .not-found__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .not-found__actions .btn {
    white-space: normal;
  }
}

.not-found h1 {
  font-size: var(--text-hero);
}

.not-found p {
  color: var(--slate);
  max-width: 560px;
  margin-inline: auto;
}

/* CSP utilities — the site ships ZERO inline style="" attributes (an
   enforced Content-Security-Policy without 'unsafe-inline' blocks them,
   including ones injected at runtime via innerHTML, which Astro scoped
   CSS cannot reach). These global classes replace the five former
   inline styles on /explore/ and the compare tool. */
.mt-1 {
  margin-top: 1rem;
}

.explore-results__head {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
}

.explore-sort__label {
  font-size: var(--text-small);
  font-weight: 600;
}

/* Footer "Cookie settings" button — looks like the footer links, so the
   consent control sits naturally in the Legal column. It is a <button>
   (it re-opens the cookie banner) styled as a link; the banner script
   lives in src/components/CookieBanner.astro. */
.footer-link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--teal);
  cursor: pointer;
  text-align: left;
}

.footer-link-button:hover {
  text-decoration: underline;
}

/* While the cookie banner is open (html.cookie-open, set by the banner
   script), reserve space at the bottom of the page so the footer can
   still be scrolled fully into view above the fixed banner instead of
   hiding behind it. Desktop banner ≈ 6rem tall; the mobile bottom
   sheet ≈ 15rem tall. */
html.cookie-open body {
  padding-bottom: 8rem;
}

@media (max-width: 560px) {
  html.cookie-open body {
    padding-bottom: 16rem;
  }
}

/* Timeline generator — UNSCOPED on purpose (fix 2026-11-13, Hanii-approved).
   The timeline <ol> is built at runtime via innerHTML, so component-scoped
   styles never apply to it — the live site rendered "1931Born" (year joined
   to event, no gold border/dots). These rules moved here from
   timeline-generator.astro (scoped block removed there) so they match the
   runtime-built markup. The year/event spans also carry a literal space
   between them in the render code as a second guard. */
.tg-timeline {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--gold);
}

.tg-timeline li {
  position: relative;
  padding-bottom: 1rem;
}

.tg-timeline li::before {
  content: '';
  position: absolute;
  left: calc(-1.25rem - 6px);
  top: 0.35rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}

.tg-year {
  display: block;
  font-weight: 700;
  font-family: var(--font-display);
}

/* ============================================================
   White-label fix (2026-11-14): formerly component-scoped
   style blocks, moved here verbatim so the build emits a
   single public stylesheet.
   Rules are appended AFTER the original stylesheet so
   they win equal-specificity ties exactly as the scoped
   (higher-specificity) versions did. .tool-row control
   rules are prefixed with .tool-box to keep beating the
   global .tool-box select/input rules on padding.
   ============================================================ */

/* Former scoped .tool-box (adds margin-bottom: 2rem to the global one). */
.tool-box {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.tool-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: end;
}

/* Modifier: the 5 tools whose scoped .tool-row carried margin-top. */
.tool-row--gap {
  margin-top: 1rem;
}

/* Tool controls: 9rem base; .tool-row--wide overrides to 12rem. */
.tool-box .tool-row select,
.tool-box .tool-row input,
.tool-box .tool-row textarea {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font: inherit;
  background: var(--paper);
  color: var(--ink);
  min-width: 9rem;
}

.tool-box .tool-row--wide select,
.tool-box .tool-row--wide input,
.tool-box .tool-row--wide textarea {
  min-width: 12rem;
}

.tool-box .tool-row select:focus,
.tool-box .tool-row input:focus,
.tool-box .tool-row textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* Former scoped .tool-row label — prefixed with .tool-box so it keeps
   beating the global .tool-box label rule on font-size. */
.tool-box .tool-row label {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* from components/CookieBanner.astro */
.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--paper);
  border-top: 2px solid var(--gold);
  box-shadow: 0 -8px 32px rgba(20, 33, 61, 0.16);
  padding: 0.9rem 1rem max(0.9rem, env(safe-area-inset-bottom));
}

/* from components/CookieBanner.astro */
.cookie-banner__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* from components/CookieBanner.astro */
.cookie-banner__text {
  flex: 1 1 20rem;
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.5;
}

/* from components/CookieBanner.astro */
.cookie-banner__text strong {
  font-family: var(--font-display);
}

/* from components/CookieBanner.astro */
.cookie-banner__text a {
  color: var(--teal);
  text-decoration: underline;
}

/* from components/CookieBanner.astro */
.cookie-banner__actions {
  display: flex;
  gap: 0.6rem;
  flex: 0 0 auto;
}

/* from components/CookieBanner.astro */
.cookie-banner__actions button {
  white-space: nowrap;
  min-height: 3rem;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

/* from components/CookieBanner.astro */
.cookie-banner__actions button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* from components/CookieBanner.astro */
#cookie-accept {
  background: var(--teal);
  border: 1px solid var(--teal);
  color: #fff;
}

/* from components/CookieBanner.astro */
#cookie-accept:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

/* from components/CookieBanner.astro */
#cookie-reject {
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--ink);
}

/* from components/CookieBanner.astro */
#cookie-reject:hover {
  background: var(--gold-bg);
}

@media (max-width: 560px) {
  /* from components/CookieBanner.astro */
  .cookie-banner {
    border-radius: 1rem 1rem 0 0;
    padding: 1.1rem 1rem max(1.1rem, env(safe-area-inset-bottom));
  }
}

@media (max-width: 560px) {
  /* from components/CookieBanner.astro */
  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 560px) {
  /* from components/CookieBanner.astro */
  .cookie-banner__text {
    flex: 1 1 auto;
  }
}

@media (max-width: 560px) {
  /* from components/CookieBanner.astro */
  .cookie-banner__actions {
    width: 100%;
  }
}

@media (max-width: 560px) {
  /* from components/CookieBanner.astro */
  .cookie-banner__actions button {
    flex: 1;
  }
}

/* from components/tools/age-calculator.astro */
.ac-mode {
  border: 0;
  padding: 0;
  margin: 0 0 0.5rem;
}

/* from components/tools/age-calculator.astro */
.ac-mode legend {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
  padding: 0;
  margin-bottom: 0.4rem;
}

/* from components/tools/age-calculator.astro */
.ac-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.35rem 0;
  font-size: var(--text-small);
  font-weight: 400;
}

/* from components/tools/age-calculator.astro */
.ac-radio input {
  margin-top: 0.2rem;
  flex: none;
}

/* from components/tools/age-calculator.astro */
.tool-hint {
  margin-top: 1rem;
  font-size: var(--text-small);
  color: var(--slate);
}

/* from components/tools/age-calculator.astro */
.ac-result {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

/* from components/tools/age-calculator.astro */
.ac-big {
  font-size: 1.25rem;
  font-family: var(--font-display);
}

/* from components/tools/age-calculator.astro */
.ac-facts {
  margin: 0.75rem 0 0;
}

/* from components/tools/age-calculator.astro */
.tool-empty {
  color: var(--slate);
}

/* from components/tools/birthday-calendar.astro */
.cal-title {
  margin-top: 1.5rem;
  font-size: var(--text-h3);
}

/* from components/tools/birthday-calendar.astro */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
}

/* from components/tools/birthday-calendar.astro */
.cal-head {
  text-align: center;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--slate);
  padding: 0.35rem 0;
}

/* from components/tools/birthday-calendar.astro */
.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-height: 3.4rem;
  padding: 0.45rem 0.2rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

/* from components/tools/birthday-calendar.astro */
.cal-cell--blank {
  border-color: transparent;
  background: transparent;
  cursor: default;
}

/* from components/tools/birthday-calendar.astro */
.cal-cell--has {
  border-color: var(--gold);
  background: var(--gold-bg);
  font-weight: 600;
}

/* from components/tools/birthday-calendar.astro */
.cal-cell--selected {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

/* from components/tools/birthday-calendar.astro */
.cal-day {
  font-size: 1rem;
}

/* from components/tools/birthday-calendar.astro */
.cal-count {
  font-size: var(--text-meta);
  color: var(--gold-text);
  white-space: nowrap;
}

/* from components/tools/birthday-calendar.astro */
.cal-detail {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

/* from components/tools/birthday-calendar.astro */
.tool-results {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

/* from components/tools/birthday-calendar.astro */
.tool-results li + li {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

/* from components/tools/birthday-calendar.astro */
.tool-sub {
  font-size: var(--text-small);
  color: var(--slate);
}

@media (max-width: 639px) {
  /* from components/tools/birthday-calendar.astro */
  .cal-cell {
    min-height: 2.8rem;
  }
}

@media (max-width: 639px) {
  /* from components/tools/birthday-calendar.astro */
  .cal-count {
    font-size: 0.7rem;
  }
}

/* from components/tools/compare.astro */
#cmp-result {
  margin-top: 1.5rem;
}

/* from components/tools/compare.astro */
.cmp-curated {
  background: var(--gold-bg);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

/* from components/tools/date-difference.astro */
.dd-presets {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 1rem 0 0;
}

/* from components/tools/date-difference.astro */
.dd-presets legend {
  font-size: var(--text-small);
  font-weight: 600;
  padding: 0 0.4rem;
}

/* from components/tools/date-difference.astro */
.dd-preset {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.35rem 0;
  font: inherit;
  font-size: var(--text-small);
  color: var(--ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* from components/tools/date-difference.astro */
.dd-preset:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* from components/tools/date-difference.astro */
.dd-result {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

/* from components/tools/date-difference.astro */
.dd-big {
  font-size: 1.25rem;
  font-family: var(--font-display);
}

/* from components/tools/date-difference.astro */
.dd-facts {
  margin: 0.75rem 0 0;
}

/* from components/tools/explore-by-country.astro */
.tool-meta {
  margin-top: 1.25rem;
  font-weight: 600;
}

/* from components/tools/historical-date-calculator.astro */
.hd-mode {
  border: 0;
  padding: 0;
  margin: 0 0 0.5rem;
}

/* from components/tools/historical-date-calculator.astro */
.hd-mode legend {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
  padding: 0;
  margin-bottom: 0.4rem;
}

/* from components/tools/historical-date-calculator.astro */
.hd-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.35rem 0;
  font-size: var(--text-small);
  font-weight: 400;
}

/* from components/tools/historical-date-calculator.astro */
.hd-radio input {
  margin-top: 0.2rem;
  flex: none;
}

/* from components/tools/historical-date-calculator.astro */
.hd-result {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

/* from components/tools/historical-date-calculator.astro */
.hd-big {
  font-size: 1.25rem;
  font-family: var(--font-display);
}

/* from components/tools/historical-date-calculator.astro */
.hd-facts {
  margin: 0.75rem 0 0;
}

/* from components/tools/historical-periods.astro */
.hp-result {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

/* from components/tools/historical-periods.astro */
.hp-context {
  color: var(--slate);
}

/* from components/tools/historical-periods.astro */
.hp-meta {
  margin-top: 1rem;
  font-weight: 600;
}

/* from components/tools/reading-time.astro */
.rt-textarea-wrap {
  flex: 1 1 100%;
}

/* from components/tools/reading-time.astro — selector prefixed with
   .tool-box .tool-row so its min-width: 0 keeps overriding the
   (0,2,1) tool-control base rule, exactly as the scoped version did
   by source order inside its own style block. */
.tool-box .tool-row .rt-textarea-wrap textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  resize: vertical;
}

/* from components/tools/reading-time.astro */
.rt-mode {
  border: 0;
  padding: 0;
  margin: 0 0 0.5rem;
}

/* from components/tools/reading-time.astro */
.rt-mode legend {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
  padding: 0;
  margin-bottom: 0.4rem;
}

/* from components/tools/reading-time.astro */
.rt-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.35rem 0;
  font-size: var(--text-small);
  font-weight: 400;
}

/* from components/tools/reading-time.astro */
.rt-radio input {
  margin-top: 0.2rem;
  flex: none;
}

/* from components/tools/reading-time.astro */
.rt-result {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

/* from components/tools/reading-time.astro */
.rt-big {
  font-size: 1.25rem;
  font-family: var(--font-display);
}

/* from components/tools/reading-time.astro */
.rt-facts {
  margin: 0.75rem 0 0;
}

/* from components/tools/reading-time.astro */
.rt-list li + li {
  margin-top: 0.5rem;
}

/* from components/tools/timeline-generator.astro */
.tg-event-wrap {
  flex: 1 1 16rem;
}

/* from components/tools/timeline-generator.astro */
.tg-event-wrap input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* from components/tools/timeline-generator.astro */
.tg-mode {
  border: 0;
  padding: 0;
  margin: 0 0 0.5rem;
}

/* from components/tools/timeline-generator.astro */
.tg-mode legend {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
  padding: 0;
  margin-bottom: 0.4rem;
}

/* from components/tools/timeline-generator.astro */
.tg-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.35rem 0;
  font-size: var(--text-small);
  font-weight: 400;
}

/* from components/tools/timeline-generator.astro */
.tg-radio input {
  margin-top: 0.2rem;
  flex: none;
}

/* from components/tools/timeline-generator.astro */
.tg-user-list {
  margin: 1rem 0 0;
}

/* from components/tools/timeline-generator.astro */
.tg-user-list li + li {
  margin-top: 0.5rem;
}

/* from components/tools/timeline-generator.astro */
.tg-remove {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--text-small);
  color: var(--ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* from components/tools/timeline-generator.astro */
.tg-result {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

/* from components/tools/timeline-generator.astro */
.tg-label {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--slate);
}

/* from components/tools/timeline-generator.astro */
.tg-title {
  margin-top: 0.5rem;
}

/* from layouts/Base.astro */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

/* from layouts/Base.astro */
.skip-link:focus {
  top: 1rem;
  color: var(--paper);
}

/* from layouts/Base.astro */
.site-footer__brand-block {
  max-width: 320px;
}

/* from layouts/Base.astro */
.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* from layouts/Base.astro */
.site-footer__col li + li {
  margin-top: 0.4rem;
}

/* from layouts/Base.astro */
.site-footer__heading {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

/* from layouts/Base.astro */
.site-footer__copyright {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: var(--text-small);
  color: var(--slate);
}

@media (max-width: 1100px) {
  /* from layouts/Base.astro */
  .site-nav__group {
    display: block;
    border-bottom: 1px solid var(--rule);
  }
}

@media (max-width: 1100px) {
  /* from layouts/Base.astro */
  .site-nav__group > a, .site-nav__group > button {
    display: block;
    width: 100%;
    padding: 0.6rem 0;
    text-align: left;
  }
}

@media (max-width: 1100px) {
  /* from layouts/Base.astro */
  .site-nav__group > a::after, .site-nav__group > button::after {
    content: "";
  }
}

@media (max-width: 1100px) {
  /* from layouts/Base.astro */
  .site-nav__dropdown {
    position: static;
    display: block;
    min-width: 0;
    margin: 0 0 0.5rem;
    padding: 0 0 0 1rem;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
}

@media (max-width: 1100px) {
  /* from layouts/Base.astro */
  .site-nav__dropdown a {
    padding: 0.45rem 0;
  }
}

@media (max-width: 1100px) {
  /* from layouts/Base.astro */
  .site-search--panel {
    display: flex;
    width: 100%;
    margin: 0.5rem 0 0.25rem;
  }
}

@media (max-width: 1100px) {
  /* from layouts/Base.astro */
  .site-search--panel input {
    flex: 1;
    width: auto;
  }
}

@media (min-width: 1101px) {
  /* from layouts/Base.astro */
  .site-search--panel {
    display: none;
  }
}

/* from pages/born-in/[month].astro */
.day-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 2rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* from pages/born-in/[month].astro */
.day-table th, .day-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line, #e5e7eb);
  vertical-align: top;
}

/* from pages/born-in/[month].astro */
.day-table th {
  font-weight: 600;
}

/* from pages/born-in/[month].astro */
.day-table td:first-child {
  white-space: nowrap;
}

/* from pages/born-in/index.astro */
.dir-list__item--soon {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  background: transparent;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--slate);
}

/* from pages/countries/[slug].astro */
.country-basis {
  margin: 0.6rem 0.25rem 0;
  font-size: 0.8125rem;
  color: var(--slate);
  line-height: 1.5;
}

/* from pages/countries/[slug].astro */
.country-guide {
  max-width: var(--column-width);
  margin-bottom: 2.5rem;
}

/* from pages/countries/[slug].astro */
.country-guide .lede {
  margin-bottom: 1.5rem;
}

/* from pages/countries/[slug].astro */
.country-guide .fact-callout {
  margin-bottom: 2rem;
}

/* from pages/countries/[slug].astro */
.country-guide .fact-callout p {
  margin: 0;
}

/* from pages/countries/[slug].astro */
.country-guide h2 {
  margin-top: 2rem;
}

/* from pages/countries/[slug].astro */
.country-guide h2:first-child {
  margin-top: 0;
}

/* from pages/explore.astro */
#explore-sort {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font: inherit;
  font-size: var(--text-small);
  background: var(--paper);
  color: var(--ink);
}

/* from pages/explore.astro */
#explore-sort:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}