:root {
    --bg: #fdf9ee;
    --bg-2: #f9f3e3;
    --ink: #0a0e1f;
    --ink-2: #2a2e45;
    --muted: #6b6f82;
    --muted-2: #9a9ea8;
    --blue: #1d4ed8;
    --blue-deep: #1e3a8a;
    --blue-tint: #e0e7ff;
    --teal: #0d9488;
    --rose: #e11d48;
    --glass: rgba(255, 253, 247, 0.55);
    --glass-border: rgba(255, 255, 255, 0.75);
    --rule: rgba(10, 14, 31, 0.08);
    --map-scrim: rgba(253, 249, 238, 0.95);
    --map-scrim-soft: rgba(253, 249, 238, 0.92);
    --map-ink-onflag: #fdf9ee;
    --flag-scrim: rgba(253, 249, 238, 0.35);
    --pill-bg: rgba(255, 255, 255, 0.5);

    /* Shared historical flag images, referenced by multiple countries.
       Habsburg = Austria/Czechia/Slovakia (Austrian Empire era).
       Russian Empire = Belarus/Latvia/Lithuania/Poland (pre-1918). */
    --flag-habsburg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 300' preserveAspectRatio='xMidYMid slice'><rect width='1500' height='150' fill='%23000000'/><rect y='150' width='1500' height='150' fill='%23FCC900'/></svg>");
    --flag-russian-empire: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 300' preserveAspectRatio='xMidYMid slice'><rect width='1500' height='100' fill='%23ffffff'/><rect y='100' width='1500' height='100' fill='%230033A0'/><rect y='200' width='1500' height='100' fill='%23DA291C'/></svg>");
    --flag-germany: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 300' preserveAspectRatio='xMidYMid slice'><rect width='1500' height='100' fill='%23000000'/><rect y='100' width='1500' height='100' fill='%23ffffff'/><rect y='200' width='1500' height='100' fill='%23DD0000'/></svg>");
    --flag-iraq: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 300' preserveAspectRatio='xMidYMid slice'><rect width='1500' height='300' fill='%23E30A17'/><circle cx='720' cy='150' r='75' fill='%23ffffff'/><circle cx='745' cy='150' r='60' fill='%23E30A17'/><polygon points='850,108 858,135 887,135 864,151 873,178 850,162 827,178 836,151 813,135 842,135' fill='%23ffffff'/></svg>");
    --flag-ireland: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 300' preserveAspectRatio='xMidYMid slice'><rect width='1500' height='300' fill='%23012169'/><g><line x1='0' y1='0' x2='1500' y2='300' stroke='%23ffffff' stroke-width='60'/><line x1='1500' y1='0' x2='0' y2='300' stroke='%23ffffff' stroke-width='60'/></g><g><line x1='0' y1='0' x2='1500' y2='300' stroke='%23C8102E' stroke-width='30'/><line x1='1500' y1='0' x2='0' y2='300' stroke='%23C8102E' stroke-width='30'/></g><rect x='670' y='0' width='160' height='300' fill='%23ffffff'/><rect x='0' y='110' width='1500' height='80' fill='%23ffffff'/><rect x='710' y='0' width='80' height='300' fill='%23C8102E'/><rect x='0' y='130' width='1500' height='40' fill='%23C8102E'/></svg>");
    --flag-israel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 300' preserveAspectRatio='xMidYMid slice'><rect width='1500' height='300' fill='%23ffffff'/><rect x='0' y='45' width='1500' height='37' fill='%230038b8'/><rect x='0' y='218' width='1500' height='37' fill='%230038b8'/><g transform='translate(750 150)' fill='none' stroke='%230038b8' stroke-width='8' stroke-linejoin='miter'><polygon points='0,-65 56.3,32.5 -56.3,32.5'/><polygon points='0,65 56.3,-32.5 -56.3,-32.5'/></g></svg>");
    --flag-london: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 300' preserveAspectRatio='xMidYMid slice'><rect width='1500' height='300' fill='%23ffffff'/><rect x='0' y='120' width='1500' height='60' fill='%23CE1124'/><rect x='720' y='0' width='60' height='300' fill='%23CE1124'/></svg>");
    --flag-derbyshire: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 300' preserveAspectRatio='xMidYMid slice'><rect width='1500' height='300' fill='%236CACDA'/><rect x='0' y='117' width='1500' height='66' fill='%232A6848'/><rect x='717' y='0' width='66' height='300' fill='%232A6848'/><g transform='translate(750 150)'><g fill='%23FFC72C' stroke='%23B8860B' stroke-width='1.5'><circle cx='0' cy='-35' r='30'/><circle cx='33' cy='-11' r='30'/><circle cx='20.4' cy='28' r='30'/><circle cx='-20.4' cy='28' r='30'/><circle cx='-33' cy='-11' r='30'/></g><g transform='rotate(36)' fill='%23F5CA4C' stroke='%23B8860B' stroke-width='1'><circle cx='0' cy='-19' r='15'/><circle cx='18.1' cy='-5.9' r='15'/><circle cx='11.2' cy='15.4' r='15'/><circle cx='-11.2' cy='15.4' r='15'/><circle cx='-18.1' cy='-5.9' r='15'/></g><circle cx='0' cy='0' r='10' fill='%232A6848'/><circle cx='0' cy='0' r='4' fill='%23FFC72C'/></g></svg>");

    /* Additional historical flags for the deeper branches.
       Royal France (Capetian blue semé of gold fleurs, simplified) — medieval Champagne/Île-de-France.
       Venice (red field, gold roundel, simplified) — early-medieval and Renaissance Italy.
       Crown of Castile (quartered red/white, charges omitted) — pre-expulsion Iberia.
       Royal Portugal (white, blue quinas cross, simplified) — 16th-century Porto.
       Polish-Lithuanian Commonwealth (red-white-red royal banner) — 17th-century Galicia/Volhynia.
       Principality of Moldavia (red over blue, aurochs omitted) — Ottoman-era Bessarabia. */
    --flag-france-royal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 300' preserveAspectRatio='xMidYMid slice'><rect width='1500' height='300' fill='%232E4FA3'/><g fill='%23F5CA4C'><g transform='translate(375 100)'><circle cx='0' cy='-22' r='16'/><circle cx='-20' cy='6' r='16'/><circle cx='20' cy='6' r='16'/><rect x='-6' y='10' width='12' height='32' rx='5'/></g><g transform='translate(750 210)'><circle cx='0' cy='-22' r='16'/><circle cx='-20' cy='6' r='16'/><circle cx='20' cy='6' r='16'/><rect x='-6' y='10' width='12' height='32' rx='5'/></g><g transform='translate(1125 100)'><circle cx='0' cy='-22' r='16'/><circle cx='-20' cy='6' r='16'/><circle cx='20' cy='6' r='16'/><rect x='-6' y='10' width='12' height='32' rx='5'/></g></g></svg>");
    --flag-venice: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 300' preserveAspectRatio='xMidYMid slice'><rect width='1500' height='300' fill='%23A4123F'/><circle cx='750' cy='150' r='80' fill='%23F5CA4C'/><circle cx='750' cy='150' r='52' fill='%23A4123F'/><circle cx='750' cy='150' r='26' fill='%23F5CA4C'/></svg>");
    --flag-castile: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 300' preserveAspectRatio='xMidYMid slice'><rect width='1500' height='300' fill='%23ffffff'/><rect x='0' y='0' width='750' height='150' fill='%23C8102E'/><rect x='750' y='150' width='750' height='150' fill='%23C8102E'/></svg>");
    --flag-portugal-royal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 300' preserveAspectRatio='xMidYMid slice'><rect width='1500' height='300' fill='%23ffffff'/><g fill='%23003DA5'><rect x='715' y='80' width='70' height='50'/><rect x='715' y='170' width='70' height='50'/><rect x='625' y='125' width='70' height='50'/><rect x='805' y='125' width='70' height='50'/><rect x='715' y='125' width='70' height='50'/></g></svg>");
    --flag-plc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 300' preserveAspectRatio='xMidYMid slice'><rect width='1500' height='100' fill='%23D22630'/><rect y='100' width='1500' height='100' fill='%23ffffff'/><rect y='200' width='1500' height='100' fill='%23D22630'/></svg>");
    --flag-moldavia: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 300' preserveAspectRatio='xMidYMid slice'><rect width='1500' height='150' fill='%23C8102E'/><rect y='150' width='1500' height='150' fill='%23003DA5'/></svg>");

    /* Dutch Republic Prince's Flag (orange-white-blue) — 17th-century Amsterdam.
       Ancient Egypt (sand field, Nile band, simplified) — Alexandria and Goshen eras. */
    --flag-prinsenvlag: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 300' preserveAspectRatio='xMidYMid slice'><rect width='1500' height='100' fill='%23E8731A'/><rect y='100' width='1500' height='100' fill='%23ffffff'/><rect y='200' width='1500' height='100' fill='%23003DA5'/></svg>");
    --flag-egypt-ancient: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 300' preserveAspectRatio='xMidYMid slice'><rect width='1500' height='300' fill='%23E3C77B'/><path d='M0,170 C125,150 250,190 375,170 C500,150 625,190 750,170 C875,150 1000,190 1125,170 C1250,150 1375,190 1500,170 L1500,220 C1375,240 1250,200 1125,220 C1000,240 875,200 750,220 C625,240 500,200 375,220 C250,240 125,200 0,220 Z' fill='%231d6fa5'/></svg>");
    color-scheme: light;
  }

  /* Dark theme — applied via .is-dark class.
     Set by the inline head script based on session preference or system preference. */
  .is-dark {
    --bg: #0e1118;
    --bg-2: #161a24;
    --ink: #e6e8f0;
    --ink-2: #b4b8c6;
    --muted: #808898;
    --muted-2: #5a6072;
    --blue: #7ea3d8;
    --blue-deep: #9bb6dc;
    --blue-tint: #1c2540;
    --teal: #56b8ad;
    --rose: #d97d92;
    --glass: rgba(24, 28, 40, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --rule: rgba(230, 232, 240, 0.1);
    --map-scrim: rgba(14, 17, 24, 0.88);
    --map-scrim-soft: rgba(14, 17, 24, 0.82);
    --map-ink-onflag: #e6e8f0;
    --flag-scrim: rgba(14, 17, 24, 0.68);
    --pill-bg: rgba(255, 255, 255, 0.07);
    color-scheme: dark;
  }

  .is-dark .blob-1 { opacity: 0.14; }
  .is-dark .blob-2 { opacity: 0.12; }
  .is-dark .blob-3 { opacity: 0.08; }

  /* Dark mode: small pills need lifted text + border to stay readable */
  .is-dark .tag,
  .is-dark .socials a,
  .is-dark details.social-email summary {
    color: var(--ink);
    border-color: rgba(255, 255, 255, 0.14);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { background: var(--bg); }

  /* Accessibility skip link — visually hidden until keyboard focus */
  .skip-link {
    position: absolute;
    left: 12px;
    top: 12px;
    transform: translateY(-200%);
    z-index: 1000;
    padding: 10px 16px;
    background: var(--ink);
    color: var(--bg);
    font-family: "Host Grotesk", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: 6px;
    transition: transform 0.18s ease;
  }
  .skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Host Grotesk", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* gradient blobs */
  .blobs {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
  }

  .blob-1 {
    width: 60vw; height: 60vw;
    background: var(--blue);
    top: -18vw; left: -12vw;
    opacity: 0.42;
    animation: drift1 22s ease-in-out infinite;
  }

  .blob-2 {
    width: 48vw; height: 48vw;
    background: var(--teal);
    bottom: -14vw; right: -10vw;
    opacity: 0.38;
    animation: drift2 28s ease-in-out infinite;
  }

  .blob-3 {
    width: 36vw; height: 36vw;
    background: var(--rose);
    top: 30%; left: 45%;
    opacity: 0.22;
    animation: drift3 34s ease-in-out infinite;
  }

  @keyframes drift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(10vw, 6vw) scale(1.1); }
  }
  @keyframes drift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-8vw, -10vw) scale(1.05); }
  }
  @keyframes drift3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-6vw, 8vw) scale(0.92); }
  }

  /* grain */
  body::after {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.14;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='1' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  .page {
    position: relative;
    z-index: 10;
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 28px 24px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  /* hero — centered */
  .hero {
    padding: 16px 4px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  h1 {
    font-family: "Host Grotesk", sans-serif;
    font-size: clamp(60px, 11vw, 144px);
    line-height: 0.88;
    font-weight: 600;
    letter-spacing: -0.055em;
    color: var(--ink);
    margin-bottom: 22px;
  }

  h1 .first { display: inline-block; }

  h1 .last {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-weight: 400;
    color: var(--blue);
    letter-spacing: -0.035em;
    display: inline-block;
    margin-left: 0.08em;
  }

  .tagline {
    font-size: clamp(17px, 2vw, 22px);
    color: var(--ink-2);
    max-width: 34ch;
    line-height: 1.35;
    font-weight: 400;
    margin: 0 auto;
  }

  .tagline em {
    font-family: "Host Grotesk", sans-serif;
    font-style: normal;
    color: var(--blue);
    font-weight: 600;
  }

  /* cards container */
  .cards {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .grid {
    display: grid;
    gap: 16px;
    text-align: center;
    align-items: start;
  }

  .grid-top {
    grid-template-columns: 1fr;
  }

  .grid-bottom {
    grid-template-columns: 1fr;
  }

  .card {
    background: var(--glass);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid var(--glass-border);
    border-radius: 22px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
    box-shadow: 0 2px 20px rgba(10, 14, 31, 0.03);
    position: relative;
    overflow: hidden;
  }

  .card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  }

  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 40px rgba(10, 14, 31, 0.08);
  }

  .card-label {
    font-family: "Host Grotesk", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
    margin-top: 0;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    background: var(--pill-bg);
    border: 1px solid var(--rule);
    border-radius: 100px;
    flex-shrink: 0;
  }

  .card-label::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--blue);
  }

  /* ========== ABOUT ========== */
  .card-about p {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-2);
    letter-spacing: -0.003em;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
  }

  .card-about em {
    font-family: "Host Grotesk", sans-serif;
    font-style: normal;
    color: var(--blue);
    font-weight: 600;
  }

  /* "the longer version" expansion */
  .about-more {
    margin-top: 14px;
  }

  .about-more summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: "Host Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--blue);
    padding: 4px 2px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
    user-select: none;
  }
  .about-more summary::-webkit-details-marker { display: none; }
  .about-more summary::marker { display: none; }

  .about-more summary:hover {
    border-bottom-color: var(--blue);
  }

  .about-more-arrow {
    display: inline-block;
    font-family: "Host Grotesk", sans-serif;
    font-style: normal;
    font-size: 14px;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .about-more[open] .about-more-arrow {
    transform: rotate(90deg);
  }

  .about-more[open] summary {
    margin-bottom: 8px;
  }

  .about-more-content {
    animation: aboutFadeIn 0.38s ease;
  }

  .about-more-content p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-2);
    letter-spacing: -0.003em;
    max-width: 60ch;
    margin: 10px auto 0;
  }

  .about-more-content p:first-child {
    margin-top: 6px;
  }

  @keyframes aboutFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .tag-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 18px;
  }

  .tag {
    font-family: "Host Grotesk", sans-serif;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 5px 10px;
    background: var(--pill-bg);
    border: 1px solid var(--rule);
    border-radius: 6px;
  }

  /* ========== THREADS (6 items) ========== */
  .threads {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin-top: 2px;
    flex: 1;
    justify-content: space-evenly;
    width: 100%;
  }

  .threads li {
    border-bottom: 1px dashed var(--rule);
  }
  .threads li:last-child { border-bottom: none; }

  details.thread summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    padding: 10px 0;
    transition: transform 0.28s ease;
    user-select: none;
  }
  details.thread summary::-webkit-details-marker { display: none; }
  details.thread summary::marker { display: none; }

  details.thread summary:hover {
    transform: scale(1.03);
  }
  details.thread summary:hover .name {
    color: var(--blue);
  }

  .threads .num {
    font-family: "Host Grotesk", sans-serif;
    font-size: 10px;
    color: var(--blue);
    font-weight: 500;
    letter-spacing: 0.1em;
  }

  .threads .name {
    font-family: "Host Grotesk", sans-serif;
    font-size: 19px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.015em;
    transition: color 0.25s ease;
  }

  .threads .name em {
    font-family: "Host Grotesk", sans-serif;
    font-style: normal;
    font-weight: 400;
    color: var(--muted);
    font-size: 13px;
    margin-left: 2px;
  }

  .thread-toggle {
    font-family: "Host Grotesk", sans-serif;
    font-size: 14px;
    color: var(--muted);
    line-height: 1;
    margin-left: 2px;
    transition: transform 0.3s ease, color 0.25s ease;
    align-self: center;
  }
  details.thread[open] .thread-toggle {
    transform: rotate(45deg);
    color: var(--blue);
  }

  .thread-body {
    padding: 0 14px 14px 14px;
    animation: threadFadeIn 0.32s ease;
  }
  .thread-body p {
    font-family: "Host Grotesk", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    letter-spacing: -0.003em;
    text-align: center;
    max-width: 50ch;
    margin: 0 auto;
  }

  @keyframes threadFadeIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ========== GENEALOGY ========== */
  .card-genealogy {
    padding: 26px 26px;
  }

  /* On wide screens the genealogy card breaks out of the 1180px page column
     and stretches toward the viewport edges, so the flag tiles get real width. */
  /* No breakout: the genealogy card stays in the page column, and the
     flag grids are capped well inside it. */
  .countries,
  .place-now {
    max-width: 660px;
  }

  .genealogy-intro {
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink-2);
    max-width: 48ch;
    margin: 0 auto 20px;
  }

  .genealogy-intro em {
    font-family: "Host Grotesk", sans-serif;
    font-style: normal;
    color: var(--blue);
    font-weight: 600;
  }

  .genealogy-link {
    margin-top: -8px;
    margin-bottom: 22px;
    font-size: 14px;
    color: var(--muted);
  }
  .genealogy-link a {
    color: var(--blue);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
  }
  .genealogy-link a:hover {
    border-bottom-color: var(--blue);
  }

  .places {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
  }

  /* accordion of countries — two-column layout on desktop, single-column below 760px */
  .countries {
    column-count: 2;
    column-gap: 12px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
  }

  @media (max-width: 760px) {
    .countries {
      column-count: 1;
      column-gap: 0;
    }
  }

  details.country {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--rule);
    border-radius: 12px;
    margin-bottom: 6px;
    transition: background 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  details.country[open] {
    border-color: rgba(29, 78, 216, 0.3);
  }

  details.country summary {
    cursor: pointer;
    padding: 16px 16px;
    min-height: 76px; /* uniform tile height whether the name wraps (Empire view) or not (Place view) */
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    user-select: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    transition: padding 0.42s cubic-bezier(0.4, 0, 0.2, 1), --flag-scrim 0.3s ease;
  }

  /* Hover state: flag brightens slightly to signal interactivity (closed only) */
  details.country:not([open]) summary:hover {
    --flag-scrim: rgba(253, 249, 238, 0.18);
  }
  .is-dark details.country:not([open]) summary:hover {
    --flag-scrim: rgba(14, 17, 24, 0.5);
  }
  details.country:not([open]) summary:hover .country-toggle {
    color: var(--blue);
    transform: scale(1.15);
  }

  /* Open state on mobile: a touch taller so flag has visual presence */
  details.country[open] summary {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  /* Desktop: same modest closed height — the tiles get their presence from width */
  @media (min-width: 760px) {
    details.country summary {
      padding-top: 18px;
      padding-bottom: 18px;
    }
    details.country[open] summary {
      padding-top: 44px;
      padding-bottom: 44px;
    }
  }

  /* HISTORICAL flag backgrounds — the imperial regime that ruled when our ancestors lived there.
     Russian Empire (1721–1917), Austrian Empire/Habsburg (1804–1918), German Empire (1871–1918),
     Ottoman Empire (until 1918), British Empire, Polish-Lithuanian Commonwealth, Kingdom of Hungary. */

  /* Habsburg black/yellow bicolour — Austrian Empire / Habsburg state colours.
     Austria: 17th–late 19th century, Habsburg Empire / Austria-Hungary.
     Czechia: Hlučín 1772 (Holy Roman Empire) and Dolní Kralovice 1834 (Austrian Empire) — both under Habsburg sovereignty.
     Slovakia: Nitra 1813 was Upper Hungary within the Austrian Empire; the Hungarian tricolour
     wasn't officially adopted until 1848, so the legal flag was the Habsburg bicolour. */
  .country--austria summary,
  .country--czechia summary,
  .country--slovakia summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-habsburg) 0 0/100% 100% no-repeat;
  }

  /* Russian Empire white/blue/red — the imperial trade flag flown across the Tsarist empire pre-1918.
     Used by Belarus, Latvia, Lithuania, and partitioned Poland (Congress Poland was under Russian rule;
     the modern Polish flag wasn't legally adopted until 1919). */
  .country--belarus summary,
  .country--latvia summary,
  .country--lithuania summary,
  .country--poland summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-russian-empire) 0 0/100% 100% no-repeat;
  }

  /* Germany — German Empire (1871–1918), black/white/red horizontal */
  .country--germany summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-germany) 0 0/100% 100% no-repeat;
  }

  /* Iraq — Ottoman Empire (until 1918), red with white crescent and 5-pointed star */
  .country--iraq summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-iraq) 0 0/100% 100% no-repeat;
  }

  /* Ireland — Dublin 1896 was under UK rule (1801-1922). The legal sovereign flag
     was the post-1801 Union Jack with the red saltire of St Patrick added. */
  .country--ireland summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-ireland) 0 0/100% 100% no-repeat;
  }

  /* France — royal (Capetian) France, the regime of medieval Champagne */
  .country--france summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-france-royal) 0 0/100% 100% no-repeat;
  }

  /* Italy — Venetian standard, simplified, for Lucca/Venice/Bologna/Padua eras */
  .country--italy summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-venice) 0 0/100% 100% no-repeat;
  }

  /* Spain — Crown of Castile, pre-1492 */
  .country--spain summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-castile) 0 0/100% 100% no-repeat;
  }

  /* Portugal — royal Portugal, 16th century */
  .country--portugal summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-portugal-royal) 0 0/100% 100% no-repeat;
  }

  /* Greece — Salonika under the Ottomans, so the Ottoman flag */
  .country--greece summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-iraq) 0 0/100% 100% no-repeat;
  }

  /* Ukraine — Polish-Lithuanian Commonwealth royal banner (Galicia/Volhynia era) */
  .country--ukraine summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-plc) 0 0/100% 100% no-repeat;
  }

  /* Romania — Bukovina was the Principality of Moldavia in this era, same flag */
  .country--romania summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-moldavia) 0 0/100% 100% no-repeat;
  }

  /* Moldova — Principality of Moldavia under Ottoman suzerainty */
  .country--moldova summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-moldavia) 0 0/100% 100% no-repeat;
  }

  /* Netherlands — Dutch Republic Prince's Flag */
  .country--netherlands summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-prinsenvlag) 0 0/100% 100% no-repeat;
  }

  /* Brazil — Portuguese colonial era, so the royal Portuguese flag */
  .country--brazil summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-portugal-royal) 0 0/100% 100% no-repeat;
  }

  /* Turkey — Ottoman Istanbul */
  .country--turkey summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-iraq) 0 0/100% 100% no-repeat;
  }

  /* Egypt — ancient Alexandria and Goshen, stylised sand-and-Nile */
  .country--egypt summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-egypt-ancient) 0 0/100% 100% no-repeat;
  }

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

  .country-name {
    font-family: "Host Grotesk", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: -0.005em;
    flex: 1;
    text-shadow:
      0 0 1px rgba(0, 0, 0, 0.9),
      0 1px 3px rgba(0, 0, 0, 0.75),
      0 2px 6px rgba(0, 0, 0, 0.5);
  }

  .country-meta {
    font-family: "Host Grotesk", sans-serif;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.08em;
    text-shadow:
      0 0 1px rgba(0, 0, 0, 0.9),
      0 1px 2px rgba(0, 0, 0, 0.7);
  }

  .country-toggle {
    font-family: "Host Grotesk", sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
    font-weight: 400;
    transition: transform 0.3s ease, color 0.25s ease;
    width: 12px;
    text-align: center;
    text-shadow:
      0 0 1px rgba(0, 0, 0, 0.9),
      0 1px 2px rgba(0, 0, 0, 0.7);
  }

  /* On desktop the cards are wider, so scale text down to feel proportional */
  @media (min-width: 760px) {
    .country-name { font-size: 17px; }
    .country-meta { font-size: 10px; }
    .country-toggle { font-size: 15px; }
  }

  details.country[open] .country-toggle {
    transform: rotate(45deg);
    color: var(--blue);
  }

  /* Open state: flag becomes vivid, text shifts to white with dark shadow for legibility */
  details.country[open] summary {
    --flag-scrim: rgba(0, 0, 0, 0.18);
  }
  details.country[open] .country-name {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.4);
  }
  details.country[open] .country-meta {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  }
  details.country[open] .country-toggle {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  }

  .country-content {
    padding: 8px 16px 14px;
    display: flex;
    flex-direction: column;
    border-top: 1px dashed var(--rule);
    background: var(--bg);
  }

  .sub-place {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    gap: 4px;
    border-bottom: 1px dashed var(--rule);
  }

  .sub-place:last-child { border-bottom: none; }

  .sub-place-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .sub-place-name {
    font-family: "Host Grotesk", sans-serif;
    font-size: 15px;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.005em;
  }

  .sub-place-type {
    font-family: "Host Grotesk", sans-serif;
    font-size: 10px;
    color: var(--ink-2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .sub-place-desc {
    font-family: "Host Grotesk", sans-serif;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.55;
    letter-spacing: -0.005em;
    padding-right: 6px;
  }

  /* On desktop, bump sub-place text sizes for legibility on wider screens */
  @media (min-width: 760px) {
    .country-content { padding: 12px 22px 18px; }
    .sub-place-name { font-size: 17px; }
    .sub-place-type { font-size: 10px; }
    .sub-place-desc { font-size: 16px; line-height: 1.6; }
  }

  /* legacy chip styles - kept for backwards compat, now unused */
  .place {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 11px 16px 9px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--rule);
    border-radius: 12px;
    transition: all 0.25s ease;
    min-width: 96px;
  }

  .place:hover {
    background: var(--blue-tint);
    border-color: var(--blue);
    transform: translateY(-3px);
  }

  .place-name {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 20px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }

  .place:hover .place-name { color: var(--blue); }

  .place-country {
    font-family: "Host Grotesk", sans-serif;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: -0.005em;
  }

  /* featured "and now" home chip — width matches the country accordion grid */
  .place-now {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px dashed var(--rule);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .place-now-kicker {
    font-family: "Host Grotesk", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .place-now-kicker::after {
    content: "↓";
    font-family: "Host Grotesk", sans-serif;
    font-size: 12px;
    color: var(--blue);
  }

  .place-featured {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 40px 18px;
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
    background-color: #6CACDA;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 90' preserveAspectRatio='xMidYMid slice'><rect width='150' height='90' fill='%236CACDA'/><rect x='0' y='35' width='150' height='20' fill='%232A6848'/><rect x='65' y='0' width='20' height='90' fill='%232A6848'/><g transform='translate(75 45)'><g fill='%23FFC72C' stroke='%23B8860B' stroke-width='0.5'><circle cx='0' cy='-11' r='9.5'/><circle cx='10.46' cy='-3.4' r='9.5'/><circle cx='6.47' cy='8.9' r='9.5'/><circle cx='-6.47' cy='8.9' r='9.5'/><circle cx='-10.46' cy='-3.4' r='9.5'/></g><g transform='rotate(36)' fill='%23F5CA4C' stroke='%23B8860B' stroke-width='0.3'><circle cx='0' cy='-6' r='4.8'/><circle cx='5.7' cy='-1.85' r='4.8'/><circle cx='3.53' cy='4.85' r='4.8'/><circle cx='-3.53' cy='4.85' r='4.8'/><circle cx='-5.7' cy='-1.85' r='4.8'/></g><circle cx='0' cy='0' r='3.2' fill='%232A6848'/><circle cx='0' cy='0' r='1.2' fill='%23FFC72C'/></g></svg>");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 18px;
    transition: padding 0.3s ease, min-height 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0 8px 24px rgba(42, 104, 72, 0.28);
    position: relative;
    overflow: hidden;
  }

  /* Open state on wider screens: tall enough for the flag to show its colours */
  @media (min-width: 760px) {
    details.place-featured[open] {
      min-height: clamp(180px, 28vw, 360px);
      padding: 28px 44px 24px;
    }
  }

  .place-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.45) 100%);
    pointer-events: none;
    border-radius: inherit;
    transition: background 0.3s ease;
  }

  .place-featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(42, 104, 72, 0.4);
  }

  /* Israel flag variant for the "before all of this" origin block */
  .place-featured--israel {
    background-color: #ffffff;
    background-image: var(--flag-israel);
    box-shadow: 0 8px 24px rgba(0, 56, 184, 0.28);
  }
  .place-featured--israel:hover {
    box-shadow: 0 16px 34px rgba(0, 56, 184, 0.4);
  }

  /* Closed state, light mode: Israel/London (white flags) get NO scrim so the colours show fully.
     Text relies on heavy multi-layer dark halo shadows for legibility. */
  .place-featured--israel:not([open])::before,
  .place-featured--london:not([open])::before {
    background: none;
  }

  /* Dark mode, CLOSED: dim all three flags (like the country accordion behaviour) */
  .is-dark .place-featured--israel:not([open])::before,
  .is-dark .place-featured--london:not([open])::before,
  .is-dark .place-featured--derbyshire:not([open])::before {
    background: rgba(10, 12, 18, 0.6);
  }

  /* Hover, CLOSED: the featured flags brighten, matching the country tiles */
  .place-featured--derbyshire:not([open]):hover::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.28) 100%);
  }
  .is-dark .place-featured--israel:not([open]):hover::before,
  .is-dark .place-featured--london:not([open]):hover::before,
  .is-dark .place-featured--derbyshire:not([open]):hover::before {
    background: rgba(10, 12, 18, 0.32);
  }

  /* OPEN state: restore moderate scrim so the description text is properly readable */
  details.place-featured[open]::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.55) 100%);
  }
  .is-dark details.place-featured[open]::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.65) 100%);
  }

  /* Heavy multi-layer dark halo for text on white flags in light-mode closed state */
  .place-featured--israel .place-featured-name,
  .place-featured--london .place-featured-name {
    text-shadow:
      0 0 1px rgba(0, 0, 0, 1),
      0 0 3px rgba(0, 0, 0, 0.9),
      0 2px 6px rgba(0, 0, 0, 0.85),
      0 4px 14px rgba(0, 0, 0, 0.7);
  }
  .place-featured--israel .place-featured-country,
  .place-featured--london .place-featured-country,
  .place-featured--israel .place-featured-toggle,
  .place-featured--london .place-featured-toggle {
    text-shadow:
      0 0 1px rgba(0, 0, 0, 1),
      0 1px 3px rgba(0, 0, 0, 0.9),
      0 2px 8px rgba(0, 0, 0, 0.7);
  }

  /* "before all of this" — the origin block uses same vertical rhythm as place-now */
  .place-then {
    margin-top: 6px;
    margin-bottom: 22px;
  }

  /* Two stacked place-featured siblings under "and now" */
  .place-now .place-featured + .place-featured {
    margin-top: 14px;
  }

  /* ========== VIEW TOGGLE (places / timeline) ========== */
  .view-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 0 auto 26px;
    padding: 4px;
    background: var(--pill-bg);
    border: 1px solid var(--rule);
    border-radius: 22px;
    max-width: 640px;
  }
  .no-js .view-toggle { display: none; }

  .view-btn {
    font-family: "Host Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    background: transparent;
    border: none;
    border-radius: 100px;
    padding: 7px 16px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
  }
  .view-btn:hover { color: var(--ink); }
  .view-btn.is-active {
    background: var(--blue);
    color: #fff;
  }
  .view-btn:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }

  /* View containers. Places view is the default (and the no-JS fallback);
     all other views carry the hidden attribute until the toggle swaps them in. */
  .gview {
    width: 100%; /* the card centres flex children, which would otherwise shrink-to-fit and give each view a different width */
    animation: countryFadeIn 0.3s ease;
  }
  .gview[hidden] { display: none; }

  /* ========== EMPIRES VIEW ========== */
  /* Reuses the country accordion + flag machinery with empire-specific classes. */
  .country--rome summary,
  .country--italianstates summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-venice) 0 0/100% 100% no-repeat;
  }
  .country--royalfrance summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-france-royal) 0 0/100% 100% no-repeat;
  }
  .country--castile summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-castile) 0 0/100% 100% no-repeat;
  }
  .country--hre summary,
  .country--habsburgs summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-habsburg) 0 0/100% 100% no-repeat;
  }
  .country--commonwealth summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-plc) 0 0/100% 100% no-repeat;
  }
  .country--prussia summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-germany) 0 0/100% 100% no-repeat;
  }
  .country--russianpale summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-russian-empire) 0 0/100% 100% no-repeat;
  }
  .country--ottomans summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-iraq) 0 0/100% 100% no-repeat;
  }
  .country--british summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-ireland) 0 0/100% 100% no-repeat;
  }
  .country--atlantic summary {
    background:
      linear-gradient(var(--flag-scrim), var(--flag-scrim)),
      var(--flag-prinsenvlag) 0 0/100% 100% no-repeat;
  }
  .country-dialog.country--rome .dialog-header,
  .country-dialog.country--italianstates .dialog-header { background-image: var(--flag-venice); }
  .country-dialog.country--royalfrance .dialog-header { background-image: var(--flag-france-royal); }
  .country-dialog.country--castile .dialog-header { background-image: var(--flag-castile); }
  .country-dialog.country--hre .dialog-header,
  .country-dialog.country--habsburgs .dialog-header { background-image: var(--flag-habsburg); }
  .country-dialog.country--commonwealth .dialog-header { background-image: var(--flag-plc); }
  .country-dialog.country--prussia .dialog-header { background-image: var(--flag-germany); }
  .country-dialog.country--russianpale .dialog-header { background-image: var(--flag-russian-empire); }
  .country-dialog.country--ottomans .dialog-header { background-image: var(--flag-iraq); }
  .country-dialog.country--british .dialog-header { background-image: var(--flag-ireland); }
  .country-dialog.country--atlantic .dialog-header { background-image: var(--flag-prinsenvlag); }

  /* ========== BRANCHES VIEW ========== */
  .branches {
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
  }
  details.branch {
    background: var(--pill-bg);
    border: 1px solid var(--rule);
    border-radius: 12px;
    margin-bottom: 6px;
    overflow: hidden;
    transition: border-color 0.25s ease;
  }
  details.branch[open] { border-color: rgba(29, 78, 216, 0.3); }
  details.branch summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px;
    user-select: none;
  }
  details.branch summary::-webkit-details-marker { display: none; }
  details.branch summary::marker { display: none; }
  .branch-name {
    font-family: "Host Grotesk", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.005em;
    flex: 1;
  }
  details.branch summary:hover .branch-name { color: var(--blue); }
  .branch-meta {
    font-family: "Host Grotesk", sans-serif;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
  }
  .branch-toggle {
    font-family: "Host Grotesk", sans-serif;
    font-size: 15px;
    color: var(--muted);
    line-height: 1;
    width: 12px;
    text-align: center;
    transition: transform 0.3s ease, color 0.25s ease;
  }
  details.branch[open] .branch-toggle { transform: rotate(45deg); color: var(--blue); }
  .branch-body {
    padding: 10px 16px 14px;
    border-top: 1px dashed var(--rule);
    animation: countryFadeIn 0.3s ease;
  }
  .branch-body p {
    font-family: "Host Grotesk", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    letter-spacing: -0.003em;
  }

  /* ========== MAP VIEW ========== */
  .map-wrap {
    max-width: 900px;
    margin: 0 auto;
  }
  .map-wrap svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .map-land path {
    fill: var(--bg-2);
    stroke: var(--muted-2);
    stroke-width: 0.75;
    stroke-opacity: 0.45;
  }
  .is-dark .map-land path {
    fill: rgba(255, 255, 255, 0.04);
    stroke-opacity: 0.3;
  }
  .map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    margin-top: 12px;
    font-family: "Host Grotesk", sans-serif;
    font-size: 12px;
    color: var(--muted);
  }
  .map-legend span { display: inline-flex; align-items: center; gap: 7px; }
  .legend-line {
    width: 24px;
    height: 0;
    border-top: 2px dashed;
    display: inline-block;
  }
  .map-note {
    margin-top: 8px;
    font-family: "Host Grotesk", sans-serif;
    font-size: 12px;
    color: var(--muted-2);
  }

  /* ========== DEPARTURES VIEW ========== */
  .departures {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
  }
  .dep-group { margin-bottom: 24px; }
  .dep-group:last-child { margin-bottom: 4px; }
  .dep-head {
    font-family: "Host Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
    background: var(--pill-bg);
    border: 1px solid var(--rule);
    border-radius: 100px;
    margin-bottom: 8px;
  }
  .dep-head::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--dep-dot, var(--blue));
  }
  .dep-group p {
    font-family: "Host Grotesk", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    letter-spacing: -0.003em;
  }

  /* ========== NUMBERS VIEW ========== */
  .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 880px;
    margin: 0 auto;
  }
  @media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 420px) { .stats { grid-template-columns: 1fr; } }
  .stat {
    background: var(--pill-bg);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 22px 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    transition: border-color 0.25s ease, transform 0.25s ease;
  }
  .stat:hover { border-color: var(--blue); transform: translateY(-2px); }
  button.stat {
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: center;
  }
  a.stat {
    text-decoration: none;
    color: inherit;
  }

  /* Royal portraits in the kings & queens popup */
  .royal-img {
    width: 100%;
    height: auto; /* full image, uncropped */
    border-radius: 10px;
    border: 1px solid var(--rule);
    margin-bottom: 10px;
    display: block;
  }
  .royal-credit {
    font-family: "Host Grotesk", sans-serif;
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
    line-height: 1.45;
  }
  .royal-note {
    font-family: "Host Grotesk", sans-serif;
    font-size: 13px;
    color: var(--muted);
    padding: 10px 0 4px;
    border-bottom: 1px dashed var(--rule);
    margin-bottom: 4px;
  }
  .stat-num {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: clamp(32px, 4vw, 44px);
    line-height: 1;
    color: var(--blue);
    letter-spacing: -0.02em;
  }
  .stat-label {
    font-family: "Host Grotesk", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    text-align: center;
    line-height: 1.35;
  }
  .stat-note {
    font-family: "Host Grotesk", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 2px 8px;
    background: var(--pill-bg);
    border: 1px solid var(--rule);
    border-radius: 100px;
  }

  /* Expandable stat tile (the king-for-a-night story). When open it spans the grid. */
  details.stat-expand summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    user-select: none;
  }
  details.stat-expand summary::-webkit-details-marker { display: none; }
  details.stat-expand summary::marker { display: none; }
  details.stat-expand[open] { grid-column: 1 / -1; }
  .stat-story {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--rule);
    text-align: left;
    max-width: 64ch;
    margin-left: auto;
    margin-right: auto;
    animation: countryFadeIn 0.3s ease;
  }
  .stat-story p {
    font-family: "Host Grotesk", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    letter-spacing: -0.003em;
  }
  .stat-story p + p { margin-top: 10px; }
  .stat-story em {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    color: var(--blue);
  }

  /* ========== TIMELINE ========== */
  .timeline {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
    position: relative;
    padding: 6px 0 6px 26px;
    animation: countryFadeIn 0.3s ease;
  }
  .timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: linear-gradient(180deg, var(--blue) 0%, var(--teal) 60%, var(--rose) 100%);
    opacity: 0.35;
    border-radius: 2px;
  }

  .tl-item {
    position: relative;
    padding: 0 4px 26px 14px;
  }
  .tl-item:last-child { padding-bottom: 4px; }
  .tl-item::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg);
    border: 3px solid var(--blue);
    box-sizing: border-box;
  }

  .tl-era {
    font-family: "Host Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue);
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
  }

  .tl-tag {
    font-family: "Host Grotesk", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 2px 8px;
    background: var(--pill-bg);
    border: 1px solid var(--rule);
    border-radius: 100px;
  }

  .tl-title {
    font-family: "Host Grotesk", sans-serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .tl-title em {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-weight: 400;
    color: var(--blue);
    letter-spacing: -0.01em;
  }

  .tl-desc {
    font-family: "Host Grotesk", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    letter-spacing: -0.003em;
    max-width: 62ch;
  }

  .tl-places {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
  }
  .tl-place {
    font-family: "Host Grotesk", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--muted);
    padding: 3px 9px;
    background: var(--pill-bg);
    border: 1px solid var(--rule);
    border-radius: 100px;
  }

  @media (max-width: 540px) {
    .timeline { padding-left: 20px; }
    .tl-item { padding-left: 10px; }
    .tl-item::before { left: -19px; width: 10px; height: 10px; border-width: 2.5px; }
    .tl-title { font-size: 17px; }
    .tl-desc { font-size: 14.5px; }
  }

  /* London — St George's Cross */
  .place-featured--london {
    background-color: #ffffff;
    background-image: var(--flag-london);
    box-shadow: 0 8px 24px rgba(206, 17, 36, 0.22);
  }
  .place-featured--london:hover {
    box-shadow: 0 16px 34px rgba(206, 17, 36, 0.34);
  }

  /* Derbyshire — Derbyshire flag (light blue ground, green cross, gold Tudor rose) */
  .place-featured--derbyshire {
    background-color: #6CACDA;
    background-image: var(--flag-derbyshire);
    box-shadow: 0 8px 24px rgba(42, 104, 72, 0.28);
  }
  .place-featured--derbyshire:hover {
    box-shadow: 0 16px 34px rgba(42, 104, 72, 0.4);
  }

  .place-featured-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    user-select: none;
  }

  .place-featured-summary::-webkit-details-marker { display: none; }
  .place-featured-summary::marker { display: none; }

  .place-featured-name {
    font-family: "Host Grotesk", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.1;
    color: #fff;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.7);
  }

  .place-featured-country {
    font-family: "Host Grotesk", sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.6);
  }

  .place-featured-toggle {
    font-family: "Host Grotesk", sans-serif;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1;
    margin-top: 12px;
    transition: transform 0.3s ease, color 0.25s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65), 0 0 2px rgba(0, 0, 0, 0.5);
  }

  /* On desktop: bump up subtitle text for readability */
  @media (min-width: 760px) {
    .place-featured-country { font-size: 15px; }
    .place-featured-desc { font-size: 16px; line-height: 1.6; }
  }

  details.place-featured[open] .place-featured-toggle {
    transform: rotate(45deg);
    color: #fff;
  }

  .place-featured-content {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
    max-width: 600px;
    position: relative;
    z-index: 1;
  }

  .place-featured-desc {
    font-family: "Host Grotesk", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: #ffffff;
    letter-spacing: -0.005em;
    text-align: center;
    text-shadow:
      0 0 1px rgba(0, 0, 0, 0.8),
      0 1px 4px rgba(0, 0, 0, 0.75),
      0 2px 12px rgba(0, 0, 0, 0.55);
  }

  .place-featured-desc a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    padding-bottom: 1px;
    transition: border-color 0.2s ease, color 0.2s ease;
  }

  .place-featured-desc a:hover {
    color: #FFC72C;
    border-bottom-color: #FFC72C;
  }

  /* ========== CONTACT ========== */
  .socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: auto;
  }

  .socials a {
    font-family: "Host Grotesk", sans-serif;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
    text-decoration: none;
    padding: 6px 8px;
    background: var(--pill-bg);
    border: 1px solid var(--rule);
    border-radius: 8px;
    transition: all 0.2s ease;
  }

  .socials a:hover {
    color: white;
    background: var(--blue);
    border-color: var(--blue);
    transform: translateY(-2px);
  }

  /* inline email details: summary is styled like a social pill, expands to show address */
  details.social-email {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  details.social-email summary {
    cursor: pointer;
    list-style: none;
    font-family: "Host Grotesk", sans-serif;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
    padding: 6px 8px;
    background: var(--pill-bg);
    border: 1px solid var(--rule);
    border-radius: 8px;
    transition: all 0.2s ease;
    user-select: none;
  }

  details.social-email summary::-webkit-details-marker { display: none; }
  details.social-email summary::marker { display: none; }

  details.social-email summary:hover {
    color: white;
    background: var(--blue);
    border-color: var(--blue);
    transform: translateY(-2px);
  }

  details.social-email[open] summary {
    color: var(--blue);
    background: rgba(29, 78, 216, 0.1);
    border-color: var(--blue);
  }

  details.social-email .copy-email,
  details.social-email a {
    font-family: "Host Grotesk", sans-serif;
    font-size: 10px;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    color: var(--ink);
    text-decoration: none;
    padding: 6px 10px;
    background: rgba(29, 78, 216, 0.08);
    border: 1px solid rgba(29, 78, 216, 0.3);
    border-radius: 8px;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    position: relative;
  }

  details.social-email .copy-email:hover,
  details.social-email a:hover {
    color: white;
    background: var(--blue);
    border-color: var(--blue);
  }

  /* "copied" confirmation, hidden until the button toggles is-copied */
  .copy-email-feedback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal);
    background: var(--bg);
    border-radius: inherit;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
  }
  .copy-email.is-copied .copy-email-feedback {
    opacity: 1;
    transform: scale(1);
  }
  .copy-email.is-copied .copy-email-text {
    opacity: 0;
  }

  /* mailto fallback shown only when JS can't run */
  .copy-email-fallback { display: none; }
  .no-js .copy-email { display: none; }
  .no-js .copy-email-fallback { display: inline-flex; }

  /* footer */
  footer {
    margin-top: 24px;
    padding: 16px 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    font-family: "Host Grotesk", sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--muted);
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    align-self: center;
  }

  footer .copyright {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  footer .copyright::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--blue);
    border-radius: 50%;
    display: inline-block;
  }

  footer .divider {
    width: 1px;
    height: 14px;
    background: var(--rule);
  }

  footer .footer-link {
    color: var(--muted);
    text-decoration: none;
    letter-spacing: 0.08em;
    transition: color 0.18s ease;
  }
  footer .footer-link:hover { color: var(--ink); }

  /* Theme toggle */
  .theme-toggle {
    background: transparent;
    border: none;
    padding: 2px 4px;
    margin: -4px 0;
    font-family: "Host Grotesk", sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 100px;
    transition: color 0.18s ease, background 0.18s ease;
    line-height: 1;
  }
  .theme-toggle:hover {
    color: var(--ink);
  }
  .theme-toggle:focus-visible {
    outline: 1px solid var(--blue);
    outline-offset: 2px;
  }
  .theme-toggle svg {
    width: 13px;
    height: 13px;
    display: block;
    flex-shrink: 0;
  }
  .theme-toggle .theme-icon-sun  { display: none; }
  .theme-toggle .theme-icon-moon { display: block; }
  .is-dark .theme-toggle .theme-icon-sun  { display: block; }
  .is-dark .theme-toggle .theme-icon-moon { display: none; }

  footer .status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  footer .status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 10px rgba(13, 148, 136, 0.65);
    animation: pulse 2.4s ease-in-out infinite;
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
  }

  ::selection { background: var(--blue); color: white; }

  /* entrance animation */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .hero { animation: fadeUp 0.8s ease 0.08s backwards; }
  .grid-top .card:nth-child(1) { animation: fadeUp 0.7s ease 0.28s backwards; }
  .grid-top .card:nth-child(2) { animation: fadeUp 0.7s ease 0.36s backwards; }
  .grid-bottom .card:nth-child(1) { animation: fadeUp 0.7s ease 0.48s backwards; }
  .grid-bottom .card:nth-child(2) { animation: fadeUp 0.7s ease 0.56s backwards; }
  .grid-bottom .card:nth-child(3) { animation: fadeUp 0.7s ease 0.64s backwards; }
  footer { animation: fadeUp 0.7s ease 0.80s backwards; }

  /* mobile */
  @media (max-width: 900px) {
    .page { padding: 18px 16px 20px; }
    .hero { padding: 10px 2px 32px; }
    .grid-top, .grid-bottom {
      grid-template-columns: 1fr;
    }
    .card {
      padding: 22px 18px;
      border-radius: 18px;
    }
    .card-genealogy { padding: 24px 12px; }
    footer {
      padding: 12px 18px;
      font-size: 10px;
      margin-top: 16px;
      gap: 12px;
    }
  }

  /* Register --flag-scrim as an animatable colour so the hover/open scrim
     change tweens smoothly instead of snapping. Browsers without @property
     support gracefully fall back to the instant change. */
  @property --flag-scrim {
    syntax: "<color>";
    initial-value: rgba(253, 249, 238, 0.35);
    inherits: true;
  }

  @keyframes countryFadeIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  details.country[open] .country-content {
    animation: countryFadeIn 0.3s ease;
  }
  details.place-featured[open] .place-featured-content {
    animation: countryFadeIn 0.32s ease;
  }

  /* Respect users who've asked the OS to reduce motion: pause the drifting
     gradient blobs, the pulsing status dot, and the entrance/hover animations. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ========== POPUP DIALOG ========== */
  /* Used by JS: clicking any country/place flag intercepts the native
     <details> toggle and shows the content in this modal instead.
     If JS is off, the accordions still work inline as before. */
  .country-dialog {
    border: none;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    border-radius: 18px;
    width: min(560px, 94vw);
    max-width: 94vw;
    max-height: min(82vh, 760px);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    /* Explicit centering — some browsers don't reliably auto-centre
       <dialog> when opened via showModal(). This pins it dead-centre. */
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
  }

  .country-dialog::backdrop {
    background: rgba(10, 14, 31, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  @keyframes dialogIn {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.98); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  .country-dialog[open] {
    animation: dialogIn 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .country-dialog .dialog-header {
    padding: 38px 28px 22px;
    background-color: var(--bg-2);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: #fff;
  }
  .country-dialog .dialog-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
  }

  /* Flag backgrounds — same set as the inline accordions, applied to the
     dialog header so the modal carries the country's flag at the top. */
  .country-dialog.country--austria .dialog-header,
  .country-dialog.country--czechia .dialog-header,
  .country-dialog.country--slovakia .dialog-header {
    background-image: var(--flag-habsburg);
  }
  .country-dialog.country--belarus .dialog-header,
  .country-dialog.country--latvia .dialog-header,
  .country-dialog.country--lithuania .dialog-header,
  .country-dialog.country--poland .dialog-header {
    background-image: var(--flag-russian-empire);
  }
  .country-dialog.country--germany .dialog-header { background-image: var(--flag-germany); }
  .country-dialog.country--iraq    .dialog-header { background-image: var(--flag-iraq); }
  .country-dialog.country--ireland .dialog-header { background-image: var(--flag-ireland); }
  .country-dialog.country--france   .dialog-header { background-image: var(--flag-france-royal); }
  .country-dialog.country--italy    .dialog-header { background-image: var(--flag-venice); }
  .country-dialog.country--spain    .dialog-header { background-image: var(--flag-castile); }
  .country-dialog.country--portugal .dialog-header { background-image: var(--flag-portugal-royal); }
  .country-dialog.country--greece   .dialog-header { background-image: var(--flag-iraq); }
  .country-dialog.country--ukraine  .dialog-header { background-image: var(--flag-plc); }
  .country-dialog.country--moldova  .dialog-header { background-image: var(--flag-moldavia); }
  .country-dialog.country--romania  .dialog-header { background-image: var(--flag-moldavia); }
  .country-dialog.country--netherlands .dialog-header { background-image: var(--flag-prinsenvlag); }
  .country-dialog.country--brazil      .dialog-header { background-image: var(--flag-portugal-royal); }
  .country-dialog.country--turkey      .dialog-header { background-image: var(--flag-iraq); }
  .country-dialog.country--egypt       .dialog-header { background-image: var(--flag-egypt-ancient); }
  .country-dialog.place-featured--israel     .dialog-header { background-image: var(--flag-israel); background-color: #ffffff; }
  .country-dialog.place-featured--london     .dialog-header { background-image: var(--flag-london); background-color: #ffffff; }
  .country-dialog.place-featured--derbyshire .dialog-header { background-image: var(--flag-derbyshire); background-color: #6CACDA; }

  .country-dialog .dialog-title {
    font-family: "Host Grotesk", sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #fff;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.75);
    margin: 0;
  }

  .country-dialog .dialog-subtitle {
    font-family: "Host Grotesk", sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    margin-top: 6px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  }

  .country-dialog .dialog-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 22px;
    line-height: 1;
    font-family: "Host Grotesk", sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, transform 0.18s ease;
  }
  .country-dialog .dialog-close:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.06);
  }
  .country-dialog .dialog-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .country-dialog .dialog-body {
    padding: 6px 26px 26px;
    overflow-y: auto;
    max-height: calc(82vh - 130px);
    background: var(--bg);
  }

  /* Sub-place layout inside the dialog body — mirrors the accordion style */
  .country-dialog .sub-place {
    display: flex;
    flex-direction: column;
    padding: 14px 0;
    gap: 4px;
    border-bottom: 1px dashed var(--rule);
  }
  .country-dialog .sub-place:last-child { border-bottom: none; }
  .country-dialog .sub-place-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  .country-dialog .sub-place-name {
    font-family: "Host Grotesk", sans-serif;
    font-size: 17px;
    color: var(--ink);
    font-weight: 500;
  }
  .country-dialog .sub-place-type {
    font-family: "Host Grotesk", sans-serif;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .country-dialog .sub-place-desc {
    font-family: "Host Grotesk", sans-serif;
    font-size: 15.5px;
    color: var(--ink);
    line-height: 1.6;
    letter-spacing: -0.003em;
  }

  /* Place-featured paragraph content (Israel, London, Derbyshire) */
  .country-dialog .place-featured-content {
    padding: 12px 0 0;
    border-top: none;
  }
  .country-dialog .place-featured-desc {
    color: var(--ink);
    text-shadow: none;
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
  }
  .country-dialog .place-featured-desc a {
    color: var(--blue);
    border-bottom: 1px solid var(--blue);
  }
  .country-dialog .place-featured-desc a:hover {
    color: var(--blue-deep);
    border-bottom-color: var(--blue-deep);
  }

  /* Cue that the flag tiles open a modal — replace the inline "+" feel */
  details.country summary,
  details.place-featured summary {
    cursor: pointer;
  }

  /* Print: open everything, drop decoration, optimise for ink. Useful because
     genealogists print things and the country accordions hide most of the data. */
  @media print {
    .blobs, body::after, .theme-toggle, .skip-link, .view-toggle { display: none !important; }
    .gview[hidden] { display: none !important; }
    html, body {
      background: #fff !important;
      color: #000 !important;
    }
    .page { max-width: 100%; padding: 0; }
    .card {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border: 1px solid #ccc !important;
      box-shadow: none !important;
      break-inside: avoid;
      page-break-inside: avoid;
    }
    .hero, .grid-top .card, .grid-bottom .card, footer {
      animation: none !important;
    }
    /* Force every <details> open so all content prints */
    details { display: block !important; }
    details > summary { list-style: none; }
    details:not([open]) > *:not(summary) { display: block !important; }
    details.country, details.country summary {
      background: #fff !important;
    }
    .country-name, .country-meta, .country-toggle,
    .place-featured-name, .place-featured-country, .place-featured-desc {
      color: #000 !important;
      text-shadow: none !important;
    }
    .place-featured, .place-featured::before {
      background: transparent !important;
      box-shadow: none !important;
    }
    a { color: #000 !important; text-decoration: underline; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 90%; color: #555; }
    a[href^="mailto:"]::after, a[href^="#"]::after { content: ""; }
    .countries { column-count: 1; }
    footer { border: none !important; background: none !important; }
  }

  @media (max-width: 540px) {
    .page { padding: 14px 10px 18px; }
    .card { padding: 20px 14px; border-radius: 16px; }
    .card-genealogy { padding: 22px 8px; }
    .place-featured { padding: 18px 16px 14px; }
    .place-featured-name { font-size: 19px; }
    .place-featured-country { font-size: 12px; }
    .countries { padding: 0 4px; }
    details.country { margin-bottom: 8px; }
  }

/* ========== STANDALONE PAGES (kings, muhsam, stories) ========== */
.sub-place-list {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
.sub-place-list .sub-place {
  background: var(--pill-bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 10px;
}
.sub-place-list .sub-place:last-child { border-bottom: 1px solid var(--rule); }

/* ========== MAP ROUTE ANIMATION ==========
   Routes fade in one after another when the map view is shown
   (display:none -> block restarts the animations). */
@keyframes routeIn {
  from { opacity: 0; }
}
@keyframes nodeIn {
  from { opacity: 0; transform: scale(0.4); transform-origin: center; transform-box: fill-box; }
}
.map-wrap g[stroke-dasharray] path { animation: routeIn 0.55s ease backwards; }
.map-wrap g[stroke-width="2"] ~ g circle { animation: nodeIn 0.45s ease backwards; }
.map-wrap g[stroke-dasharray] path:nth-of-type(1) { animation-delay: 0.15s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(2) { animation-delay: 0.27s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(3) { animation-delay: 0.39s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(4) { animation-delay: 0.51s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(5) { animation-delay: 0.63s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(6) { animation-delay: 0.75s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(7) { animation-delay: 0.87s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(8) { animation-delay: 0.99s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(9) { animation-delay: 1.11s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(10) { animation-delay: 1.23s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(11) { animation-delay: 1.35s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(12) { animation-delay: 1.47s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(13) { animation-delay: 1.59s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(14) { animation-delay: 1.71s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(15) { animation-delay: 1.83s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(16) { animation-delay: 1.95s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(17) { animation-delay: 2.07s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(18) { animation-delay: 2.19s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(19) { animation-delay: 2.31s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(20) { animation-delay: 2.43s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(21) { animation-delay: 2.55s; }
.map-wrap g[stroke-dasharray] path:nth-of-type(22) { animation-delay: 2.67s; }
.map-wrap g[stroke-width="2"] ~ g circle { animation-delay: 0.1s; }
@media (prefers-reduced-motion: reduce) {
  .map-wrap g[stroke-dasharray] path,
  .map-wrap g[stroke-width="2"] ~ g circle { animation: none; }
}

a.story-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
a.story-link:hover { border-color: var(--blue); transform: translateY(-2px); }
a.story-link .sub-place-type { color: var(--blue); font-size: 14px; }

/* Clickable map nodes and labels */
.map-wrap svg [data-c] { cursor: pointer; }
.map-wrap svg circle[data-c] {
  transition: r 0.15s ease;
}
.map-wrap svg circle[data-c]:hover { r: 9; }
.map-wrap svg text[data-c]:hover { fill: var(--blue) !important; }

/* Theme toggle pinned top-right on every page */
.theme-toggle--top {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 60;
  margin: 0;
  padding: 10px 14px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
}
.theme-toggle--top svg { width: 15px; height: 15px; }
@media (max-width: 540px) {
  .theme-toggle--top { top: 10px; right: 10px; padding: 9px 12px; }
}