:root {
    /* brand */
    --navy: #0b2545;
    --navy-rgb: 11, 37, 69;
    --navy-lift: #123a63;
    --gold: #c9a24d;
    --gold-rgb: 201, 162, 77;
    --white: #ffffff;

    /* semantic: swapped by high-contrast mode */
    --ink: var(--navy);
    --ink-soft: #45607a;
    --bg: #ffffff;
    --surface: #ffffff;
    --accent: var(--gold);
    --accent-dark: #8a6a14;
    --accent-text: #7a5c0e; /* accent for text on white, 6.2:1 */
    --on-accent: #06121f; /* text on accent fills, 5.8:1 or better */
    --border: #e7e2d6;

    /* status: notice, error, success */
    --notice-bg: #fdf3e2;
    --notice-border: #e9c17a;
    --notice-text: #7a5108;
    --danger-bg: #fdecea;
    --danger-border: #f3b4ab;
    --danger-text: #9c2c1f;
    --success-bg: #eafaf3;
    --success-border: #9fe0c0;
    --success-text: #146b43;

    /* prose and warm accents */
    --ink-prose: #24405c;
    --ink-prose-strong: #1d3a56;
    --amber: #8a5a12;

    /* type */
    --font-serif: 'Fraunces', Georgia, serif;
    --font-serif-bare: 'Fraunces', serif;
    --font-sans: 'Inter', system-ui, sans-serif;
    --font-logo: 'Montserrat', 'Inter', sans-serif;

    /* shape and motion */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-pill: 999px;
    --ease: 0.15s ease;

    /* layout */
    --page-max: 1320px;
    --gutter: 24px;
    --header-h: 64px;

    /* stacking order, lowest to highest */
    --z-raise: 1;
    --z-header: 5;
    --z-panel: 20;
    --z-lightbox: 50;
    --z-skip: 100;
    --z-above-map: 1000; /* above Leaflet's own panes and controls */
    --z-guide: 9999;
  }


  html.a11y-contrast {
    --ink: #000000; --ink-soft: #202020; --bg: #ffffff; --surface: #ffffff;
    --accent: #6b4a12; --accent-dark: #4a3208; --accent-text: #4a3208; --on-accent: #ffffff; --border: #000000;
  }


  * { box-sizing: border-box; }
  :focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
  main:focus { outline: none; }
  .skip-link {
    position: absolute; left: 8px; top: -60px; z-index: var(--z-skip); background: var(--ink); color: var(--white);
    padding: 10px 16px; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; font-size: 0.9rem;
  }
  .skip-link:focus { top: 8px; }
  body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
  }
  h1, h2, h3 { font-family: var(--font-serif); margin: 0 0 0.4em; line-height: 1.15; }
  /* one editorial voice across the site: Fraunces headings and prose in deep navy, calm and spaced */
  main h1 { font-weight: 500; font-size: clamp(1.75rem, 3.2vw, 2.4rem); letter-spacing: -0.01em; }
  main h2, main h3 { font-weight: 500; letter-spacing: -0.005em; }
  main p, main figcaption, main dd { font-family: var(--font-serif); line-height: 1.7; }
  a { color: inherit; }
  .wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }


  header.site {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  header.site .wrap {
    display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 20px;
    max-width: none;
  }
  /* compass star, very widely spaced thin wordmark, and a tapered wave swoosh, stacked */
  .logo { display: inline-flex; flex-direction: column; align-items: center; gap: 0.42rem; line-height: 1; text-decoration: none; color: var(--ink); white-space: nowrap; }
  .logo .logo-star { width: 0.85rem; height: 0.85rem; fill: currentColor; }
  .logo .logo-word { font-family: var(--font-logo); font-weight: 300; font-size: 0.8rem; letter-spacing: 0.9em; margin-right: -0.9em; }
  .logo .logo-wave { width: 3.2rem; height: 0.5rem; fill: currentColor; }
  .header-actions { display: flex; align-items: center; gap: 10px; }
  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--border); background: transparent; color: var(--ink-soft);
    cursor: pointer; transition: border-color var(--ease), color var(--ease);
  }
  .icon-btn:hover { border-color: var(--accent); color: var(--accent-text); }
  .icon-btn svg { width: 18px; height: 18px; }
  /* hidden until client/site.ts shows it for logged-in visitors (it sets display inline) */
  .icon-btn.profile-link-hidden { display: none; }
  .btn-login {
    display: inline-flex; align-items: center; text-decoration: none;
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    padding: 9px 18px; font-size: 0.88rem; font-weight: 600; color: var(--ink);
    white-space: nowrap; transition: border-color var(--ease), color var(--ease);
  }
  .btn-login:hover { border-color: var(--accent); color: var(--accent-text); }

  /* Logo + icons + login pill can outrun very narrow phones (~320px). The
     search icon gives first; the accessibility button always stays. */
  @media (max-width: 400px) {
    .icon-optional { display: none; }
    .header-actions { gap: 6px; }
    .btn-login { padding: 8px 12px; }
  }

  .a11y-wrap { position: relative; }
  .a11y-panel {
    position: absolute; top: 48px; right: 0; z-index: var(--z-panel); width: 230px;
    background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 16px; box-shadow: 0 14px 32px rgba(var(--navy-rgb), 0.18);
    display: flex; flex-direction: column; gap: 14px;
  }
  .a11y-panel[hidden] { display: none; }
  .a11y-row { display: flex; flex-direction: column; gap: 8px; }
  .a11y-label { font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
  .a11y-seg { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
  .a11y-seg button {
    flex: 1; border: none; border-right: 1px solid var(--border); background: var(--surface); color: var(--ink);
    padding: 7px 0; cursor: pointer; font-family: inherit; font-size: 0.85rem;
  }
  .a11y-seg button:last-child { border-right: none; }
  .a11y-seg button.active { background: var(--ink); color: var(--white); }
  .a11y-check { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--ink); cursor: pointer; }
  .a11y-reset {
    align-self: flex-start; border: none; background: none; color: var(--accent-text);
    font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline;
  }

  html.a11y-text-large { font-size: 112.5%; }
  html.a11y-text-larger { font-size: 125%; }
  html.a11y-underline a:not(.icon-btn):not(.btn-login):not(.btn-cta):not(.logo) { text-decoration: underline; }
  html.a11y-reduce-motion, html.a11y-reduce-motion * { transition: none !important; animation: none !important; }
  html.a11y-grayscale { filter: grayscale(1); }
  html.a11y-readable-font, html.a11y-readable-font * {
    font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.01em;
  }
  html.a11y-big-cursor, html.a11y-big-cursor * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24"><path d="M3 2l7.6 19.2 2.5-8 8-2.4z" fill="black" stroke="white" stroke-width="1.2"/></svg>') 2 2, auto !important;
  }
  .a11y-reading-guide {
    position: fixed; left: 0; right: 0; height: 34px; margin-top: -17px; pointer-events: none; z-index: var(--z-guide);
    background: rgba(255,214,0,0.28); border-top: 2px solid rgba(153,109,0,0.75); border-bottom: 2px solid rgba(153,109,0,0.75);
    display: none;
  }
  .a11y-reading-guide.active { display: block; }

  footer.site { border-top: 1px solid var(--border); margin-top: 80px; padding: 32px 0; color: var(--ink-soft); font-size: 0.85rem; }
  footer.site .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
  footer.site a { color: var(--ink-soft); }


  .breadcrumb { font-size: 0.85em; color: var(--ink-soft); margin-bottom: 16px; }
  .breadcrumb a { text-decoration: none; color: var(--accent-text); }

  .btn-cta {
    display: inline-block;
    background: var(--ink);
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    transition: transform var(--ease), box-shadow var(--ease);
  }
  .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--navy-rgb), 0.3); }

  /* Shared across pages */
  .kicker {
    color: var(--accent-text); font-weight: 500; font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.2em;
  }
  .empty {
    padding: 24px; border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--ink-soft); font-size: 0.9rem;
  }
  .error {
    background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-text);
    padding: 10px 14px; border-radius: var(--radius-md); font-size: 0.88rem; margin-bottom: 16px;
  }
  .success {
    background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text);
    padding: 10px 14px; border-radius: var(--radius-md); font-size: 0.88rem; margin-bottom: 16px;
  }
  .back-link { display: inline-block; margin-top: 18px; font-size: 0.85rem; color: var(--ink-soft); text-decoration: none; }
  .back-link:hover { color: var(--accent-text); }
  .photo-input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .photo-input:focus-visible + label { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
  .profile-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
  .profile-avatar {
    width: 64px; height: 64px; border-radius: 50%; flex: none; object-fit: cover;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: var(--on-accent); display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif-bare); font-weight: 600; font-size: 1.5rem;
  }
  .list { display: grid; gap: 16px; margin-top: 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .list a {
    display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; text-decoration: none; color: var(--ink);
  }
  .list img, .list .thumb-ph { width: 100%; height: 140px; object-fit: cover; display: block; }
  .list .thumb-ph { background: var(--border); }
  .list .copy { padding: 14px; }
  .list h3 { font-size: 1rem; margin: 0 0 4px; }
  .list p { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

  /* notice box: neutral heads-up inside a page */
  .notice {
    background: var(--notice-bg); border: 1px solid var(--notice-border); color: var(--notice-text);
    padding: 14px 18px; border-radius: var(--radius-md); font-size: 0.88rem;
  }

  /* "Log out" is a POST form that looks like a link */
  .logout-form { display: inline; }
  .logout-btn { border: none; background: none; padding: 0; font: inherit; color: var(--accent-text); cursor: pointer; }

  /* a submit <button> styled as .btn-cta: drop the native border, keep the pointer */
  button.btn-cta { border: none; cursor: pointer; }

  /* sea headings and wave cards (continent and country pages) */
  .sea-head {
    display: flex; align-items: center; gap: 8px;
    color: var(--ink); font-weight: 600; font-size: 0.9rem;
    margin-top: 32px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
  }
  .sea-head.first { margin-top: 24px; }
  .sea-head i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
  .sea-head .count { color: var(--ink-soft); font-weight: 400; }
  /* min(): on a phone, with the page gutters, 170px columns no longer fit two across, so shrink to half the row */
  .card-grid, .country-grid {
    display: grid; gap: 18px 14px; margin: 18px 0 0;
    grid-template-columns: repeat(auto-fill, minmax(min(170px, calc(50% - 7px)), 1fr));
  }
  .country-card, .wave-card {
    position: relative;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: var(--surface); border: 1px solid var(--border); border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding: 16px 16px 20px; color: var(--ink); text-decoration: none;
    transition: transform var(--ease), filter var(--ease);
  }
  .country-card:hover, a.wave-card:hover { transform: translateY(-2px); filter: brightness(1.02); }
  .country-card .name, .wave-card .name { font-weight: 600; font-size: 0.9rem; }
  .wave-card .count { color: var(--ink-soft); font-weight: 400; }
  .list-note { color: var(--ink-soft); font-size: 0.9rem; margin: 14px 0 0; text-align: center; }