:root {
    --ink: #0a1522;
    --ink-deep: #060d16;
    --panel: rgba(10, 21, 34, 0.72);
    --land: #d8c8a0;
    --land-hover: #e4d7b2;
    --gold: #c6a25a;
    --gold-soft: rgba(198, 162, 90, 0.35);
    --cream: #f2e9d6;
    --muted: #a8ab9e;
    --line: rgba(242, 233, 214, 0.14);
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    height: 100%;
    background: var(--ink-deep);
    font-family: "Inter", Arial, sans-serif;
    color: var(--cream);
  }

  .stage {
    position: relative;
    width: 100%;
    height: 92vh;
    min-height: 640px;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 35%, #0f1f30 0%, var(--ink) 55%, var(--ink-deep) 100%);
  }

  svg#globe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  .graticule {
    fill: none;
    stroke: var(--line);
    stroke-width: 0.4px;
  }

  .land {
    fill: var(--land);
    fill-opacity: 0.92;
    stroke: var(--ink-deep);
    stroke-width: 0.4px;
    transition: fill-opacity 0.25s ease;
  }

  .land:hover {
    fill: var(--land-hover);
  }

  /* ---------- overlay chrome ---------- */

  .scrim-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 260px;
    background: linear-gradient(to bottom, rgba(6,13,22,0.85), rgba(6,13,22,0));
    pointer-events: none;
  }

  .header {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 48px 32px 0;
    text-align: center;
    z-index: 5;
  }

  .eyebrow {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
  }

  h1 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    font-size: 52px;
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--cream);
  }

  .subhead {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-size: 17px;
    color: var(--muted);
    max-width: 460px;
    margin: 14px auto 0;
    line-height: 1.6;
  }

  .search-wrap {
    margin: 30px auto 0;
    max-width: 300px;
    position: relative;
  }

  #search {
    width: 100%;
    background: var(--panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--cream);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    letter-spacing: 0.03em;
    padding: 11px 20px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
    transition: border-color 0.2s ease;
  }

  #search::placeholder { color: var(--muted); }

  #search:focus {
    outline: none;
    border-color: var(--gold);
  }

  .count {
    position: absolute;
    top: 48px;
    right: 32px;
    text-align: right;
    z-index: 5;
    font-family: "Cormorant Garamond", Georgia, serif;
  }

  .count .num {
    font-size: 34px;
    color: var(--gold);
    line-height: 1;
  }

  .count .lbl {
    font-family: "Inter", sans-serif;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px;
  }

  /* ---------- pins ---------- */

  .pin { cursor: pointer; }

  .pin .pulse {
    fill: none;
    stroke-width: 1px;
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .pin .pulse {
      animation: pulse 2.6s ease-out infinite;
    }
  }

  @keyframes pulse {
    0%   { r: 5;  opacity: 0.55; }
    80%  { r: 15; opacity: 0; }
    100% { r: 15; opacity: 0; }
  }

  .pin circle.dot {
    stroke: var(--ink-deep);
    stroke-width: 1.2px;
    transition: r 0.15s ease;
  }

  .pin:hover circle.dot,
  .pin.active circle.dot {
    r: 6.5;
  }

  .pin-label {
    font-family: "Inter", sans-serif;
    font-size: 10px;
    letter-spacing: 0.02em;
    fill: var(--cream);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .pin:hover .pin-label,
  .pin.active .pin-label {
    opacity: 1;
  }

  /* ---------- popup ---------- */

  .popup {
    position: absolute;
    pointer-events: none;
    background: var(--panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-top: 2px solid var(--gold);
    padding: 14px 18px;
    max-width: 230px;
    opacity: 0;
    transform: translate(-50%, calc(-100% - 16px));
    transition: opacity 0.15s ease;
    z-index: 10;
  }

  .popup.visible { opacity: 1; }

  .popup .name {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 19px;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cream);
  }

  .popup .swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .popup .desc {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
  }

  /* ---------- legend strip ---------- */

  .legend-bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 18px 32px 22px;
    background: linear-gradient(to top, rgba(6,13,22,0.9), rgba(6,13,22,0));
    z-index: 5;
  }

  .legend {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-soft) transparent;
  }

  .legend::-webkit-scrollbar { height: 4px; }
  .legend::-webkit-scrollbar-thumb { background: var(--gold-soft); }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 12px;
    color: var(--muted);
    transition: color 0.15s ease;
    flex-shrink: 0;
  }

  .legend-item:hover,
  .legend-item.active {
    color: var(--cream);
  }

  .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    color: var(--muted);
    font-size: 15px;
  }

  /* ---------------------------------------------------------------- */
/* Responsive Styles for Smaller Screens (Mobile & Small Viewports)  */
/* ---------------------------------------------------------------- */

@media screen and (max-width: 480px) {
  /* Adjust overall header container padding and alignment */
  .header {
    padding: 20px 16px;
    text-align: center;
  }

  /* Scale down the large title text for small screens */
  .header h1 {
    font-size: 2.5rem; /* Shrinks the massive font size gracefully */
    line-height: 1.1;
    padding: 10px 10px; /* Adds horizontal padding to prevent text from touching edges */
  }

  /* Make the subhead text legible and properly spaced */
  .header .subhead {
    font-size: 0.9rem;
    padding: 0 10px;
  }

  /* Adapt the search wrapper to fill available width */
  .search-wrap {
    width: 90%;
    margin: 0 auto;
  }

  #search {
    width: 100%;
    font-size: 0.9rem;
  }

  /* Reposition or resize the absolute top counter element */
  .count {
    top: 20px;
    right: 20px;
  }

  .count .num {
    font-size: 24px; /* Smaller metric display */
  }

  /* Align legend-bar neatly at the bottom of smaller devices */
  .legend-bar {
    padding: 10px;
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
}