/* OpenWater — brand direction "Curl" (2a).
   Space Grotesk, navy brand ground, blue + orange accents, pills, no shadows.
   Class names (and the legacy --color-* aliases the templates reference) are
   kept from the previous system; only the values changed. tokens per the
   branding handoff. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');

:root {
  /* Curl tokens */
  --ow-navy: #06184A;
  --ow-navy-deep: #04102F;
  --ow-blue: #1E7FE8;
  --ow-blue-light: #4FA0F5;
  --ow-orange: #F79A22;
  --ow-orange-ink: #C46A00;
  --ow-orange-tint: #FFF4E3;
  --ow-page: #FAFBFD;
  --ow-page-alt: #F0F3F8;
  --ow-surface: #FFFFFF;
  --ow-ink: #10141A;
  --ow-ink-body: #2A323D;
  --ow-ink-muted: #6B7A8D;
  --ow-line: #DDE4ED;
  --ow-border: #CDD6E2;
  --ow-border-card: #E1E7EF;

  /* Legacy aliases — inline styles across the templates reference these. */
  --color-bg: var(--ow-page);
  --color-surface: var(--ow-page-alt);
  --color-text: var(--ow-ink);
  --color-accent: var(--ow-blue);
  --color-accent-2: var(--ow-orange);
  --color-divider: var(--ow-line);

  --color-neutral-300: var(--ow-line);
  --color-neutral-600: var(--ow-ink-muted);
  --color-neutral-800: var(--ow-ink-body);

  --color-accent-100: #E8F1FD;
  --color-accent-300: var(--ow-blue-light);
  --color-accent-400: var(--ow-blue);
  --color-accent-600: #1B6BCB;
  --color-accent-700: #155FBB;
  --color-accent-800: #0F4A94;
  --color-accent-900: var(--ow-navy);

  --color-accent-2-100: var(--ow-orange-tint);
  --color-accent-2-700: var(--ow-orange-ink);
  --color-accent-2-800: #9A5300;

  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;

  --radius-md: 999px;
  --radius-lg: 16px;

  /* No shadows in this direction — separation is ground, hairlines, space. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --gutter: clamp(24px, 4vw, 56px);
  --muted-paper: var(--ow-ink-muted);
  --muted-water: #C4D5EE;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ow-page);
  color: var(--ow-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  text-wrap: pretty;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.05; }
a { color: var(--color-accent-700); text-underline-offset: 3px; transition: color 150ms ease-out; }
a:hover { color: var(--ow-blue); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ow-blue); outline-offset: 2px; }
.water :focus-visible, .water-flat :focus-visible { outline-color: var(--ow-blue-light); }
::selection { background: #CBE1FB; }

/* — layout — */
.shell { max-width: 1400px; margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(44px, 6vw, 92px); }
.measure { max-width: 50ch; }

/* — brand bands: flat navy — */
.water, .water-flat { background: var(--ow-navy); color: #fff; }
.water a, .water-flat a { color: var(--ow-blue-light); }
.water a:hover, .water-flat a:hover { color: #fff; }

/* — type — */
.eyebrow {
  font-size: 12.5px; letter-spacing: 0.24em; text-transform: uppercase;
  font-weight: 500; color: var(--ow-orange);
}
.kicker {
  font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500; color: var(--ow-orange-ink);
}
.kicker-2 { color: var(--ow-orange-ink); }
.h-hero {
  font-size: clamp(40px, 5.2vw, 74px);
  line-height: 0.97; letter-spacing: -0.05em; font-weight: 700;
}
.h-hero .alt { font-style: normal; font-weight: 700; color: var(--ow-blue-light); }
.h-section { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.02; letter-spacing: -0.04em; }
.h-sub { font-size: clamp(24px, 2.5vw, 34px); line-height: 1.1; letter-spacing: -0.035em; }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 46ch; }
.water .lede, .water-flat .lede { color: var(--muted-water); }
.muted { color: var(--ow-ink-muted); }
.pull-quote {
  background: var(--ow-orange-tint);
  border-radius: 14px;
  padding: 20px 24px;
  font-size: 16px; line-height: 1.65; font-style: normal;
  letter-spacing: 0; text-indent: 0; max-width: 56ch;
  color: var(--ow-ink-body);
}

/* — rules & definition strip — */
.rule-pair, .rule-1 { border: 0; border-top: 1px solid var(--ow-line); }
.rule-pair::after { content: none; }
.statrail { padding-block: clamp(24px, 3.5vw, 40px) 0; }
.statrail .plates {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(18px, 3vw, 40px); padding-block: clamp(18px, 2.5vw, 30px);
}
.statrail .num {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(38px, 4vw, 58px); line-height: 1; letter-spacing: -0.045em;
}
.statrail .lbl {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500; color: var(--ow-ink-muted); margin-top: 8px;
}

/* — buttons: pills — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 700; font-size: 15.5px; line-height: 1.2;
  border: 1px solid transparent;
  padding: 14px 28px; border-radius: 999px; color: var(--ow-ink);
  transition: background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.btn-primary { background: var(--ow-navy); color: #fff; }
.btn-primary:hover { background: #0A2260; color: #fff; }
.btn-secondary { border-color: var(--ow-border); color: var(--ow-ink-body); background: transparent; }
.btn-secondary:hover { border-color: var(--ow-navy); background: var(--ow-page-alt); color: var(--ow-ink); }
.btn-water { background: var(--ow-blue); color: var(--ow-navy); }
.btn-water:hover { background: #3D93F0; color: var(--ow-navy); }
.btn-water-ghost { border-color: #2C4E8C; color: #fff; background: transparent; }
.btn-water-ghost:hover { background: rgba(255,255,255,0.08); color: #fff; }
/* Buttons inside navy bands: outrank the `.water a` link color, which would
   otherwise wash button labels out to blue-on-blue. */
.water a.btn-water, .water-flat a.btn-water { color: var(--ow-navy); }
.water a.btn-water:hover, .water-flat a.btn-water:hover { color: var(--ow-navy); }
.water a.btn-water-ghost, .water-flat a.btn-water-ghost { color: #fff; }
.water a.btn-water-ghost:hover, .water-flat a.btn-water-ghost:hover { color: #fff; }
.water a.btn-primary, .water-flat a.btn-primary { color: #fff; }

/* — tags: pills — */
.tag {
  display: inline-flex; align-items: center; font-size: 13px;
  letter-spacing: 0.01em; padding: 6px 15px; border-radius: 999px; font-weight: 500;
}
.tag-accent { background: #E8F1FD; color: #0F4A94; }
.tag-accent-2 { background: var(--ow-orange-tint); color: #9A5300; }
.tag-outline { border: 1px solid var(--ow-border); color: var(--ow-ink-body); background: var(--ow-surface); }
a.tag-outline, button.tag-outline {
  cursor: pointer; text-decoration: none; font: inherit; font-size: 13.5px;
  padding: 9px 17px; border-radius: 999px;
  transition: background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
a.tag-outline:hover, button.tag-outline:hover { border-color: var(--ow-navy); background: var(--ow-page-alt); color: var(--ow-ink); }
.tag-outline[aria-pressed="true"] { background: var(--ow-navy); color: #fff; border-color: var(--ow-navy); font-weight: 700; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px; border-radius: 14px; background: var(--ow-surface);
  border: 1px solid var(--ow-border-card);
  text-decoration: none; color: inherit;
  transition: border-color 150ms ease-out;
}
a.card:hover { border-color: var(--ow-border); color: inherit; }
a.card:hover .card-title { color: var(--ow-blue); }
.card-kicker { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: var(--ow-orange-ink); }
.card-title { font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -0.02em; transition: color 150ms ease-out; }
.card-body { font-size: 14.5px; color: var(--ow-ink-body); opacity: 0.9; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ow-ink-muted); }

/* — inputs — */
.input {
  width: 100%; min-height: 48px; padding: 10px 20px; font: inherit; font-size: 15.5px;
  color: var(--ow-ink); caret-color: var(--ow-blue);
  background: var(--ow-surface);
  border: 1px solid var(--ow-border); border-radius: 999px;
}
.input::placeholder { color: var(--ow-ink-muted); opacity: 1; }
.input:focus-visible { border-color: var(--ow-blue); outline-offset: 0; }
textarea.input { border-radius: 14px; }
input[type="file"].input { border-radius: 14px; }
.water .input {
  background: rgba(255,255,255,0.08);
  border-color: #2C4E8C;
  color: #fff;
}
.water .input::placeholder { color: var(--muted-water); opacity: 1; }

/* — chrome: nav + footer — */
.topnav { padding: 12px var(--gutter); position: sticky; top: 0; z-index: 1100; }
.topnav .row { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 26px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { width: 40px; height: 40px; border-radius: 9px; }
.brand .word { font-family: var(--font-heading); font-weight: 700; font-size: 21px; letter-spacing: -0.035em; color: var(--ow-blue-light); }
.topnav a.link { color: #B8CAE6; text-decoration: none; font-size: 15px; transition: color 150ms ease-out; }
.topnav a.link:hover { color: #fff; }
.topnav a.link[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--ow-orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.topnav .btn { padding: 10px 22px; background: var(--ow-orange); color: var(--ow-navy); }
.topnav .btn:hover { background: #FFAD42; color: var(--ow-navy); }
.sitefoot { padding: clamp(28px, 4vw, 44px) var(--gutter); font-size: 14.5px; background: var(--ow-navy-deep); }
.sitefoot .row {
  max-width: 1400px; margin: 0 auto; display: flex; align-items: center;
  flex-wrap: wrap; gap: 16px 32px; color: #8DA2C4;
}
.sitefoot img { width: 28px; height: 28px; border-radius: 7px; }

/* — grids — */
.grid { display: grid; gap: clamp(24px, 4vw, 64px); }
.grid-hero { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: center; }
.grid-split { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: center; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(24px, 3vw, 40px); }
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 360px)); gap: 28px; }
.grid-nearby { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: clamp(16px, 2vw, 28px); }
.grid-body { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(32px, 5vw, 88px); align-items: start; }

/* — country index — */
.country-index { columns: 280px; column-gap: clamp(32px, 5vw, 72px); }
.country-index a {
  display: flex; align-items: baseline; gap: 10px; break-inside: avoid;
  text-decoration: none; color: var(--ow-ink); font-size: 16px;
  padding-block: 6px; transition: color 150ms ease-out;
}
.country-index a .leader {
  flex: 1; border-bottom: 1px solid var(--ow-line);
  margin-bottom: 0.34em; min-width: 24px;
}
.country-index a .n { font-weight: 700; }
.country-index a:hover { color: var(--ow-blue); }
.country-index a:hover .leader { border-color: var(--ow-border); }

/* — framed imagery & maps — */
.frame { border-radius: var(--ow-radius-image, 16px); overflow: hidden; border: 1px solid var(--ow-border-card); }
.frame-lg { border-radius: 18px; overflow: hidden; }
.mapframe {
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--ow-border-card);
}
.leaflet-container { font: inherit; }
.photo-credit { font-size: 12px; margin-top: 8px; color: var(--muted-water); }
.photo-credit a { color: inherit; }

/* — breadcrumb — */
.crumbs { font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: #8DA2C4; }
.crumbs a { color: var(--ow-blue-light); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs .here { color: #fff; }