@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("fonts/barlow-semi-condensed-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("fonts/barlow-semi-condensed-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("fonts/barlow-semi-condensed-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --brand-yellow-light: #FDF6C0;
  --brand-yellow-hero: #F8E04E;
  --brand-yellow-dark: #C9A800;
  --brand-blue-light: #EAF3F5;
  --brand-blue-hero: #9ACCD6;
  --brand-blue-dark: #5A8FA0;
  --brand-green-light: #D4E4D4;
  --brand-green-hero: #7CA47C;
  --brand-green-dark: #4A6E4A;

  /* A shared neutral is necessary for accessible text on every hero colour. */
  --brand-ink: #102C33;
  --brand-muted: #506A70;

  /* Compatibility aliases used throughout the explorer. */
  --eco-sky: var(--brand-blue-hero);
  --eco-yellow: var(--brand-yellow-hero);
  --eco-green: var(--brand-green-hero);
  --sky-pale: var(--brand-blue-light);
  --yellow-pale: var(--brand-yellow-light);
  --green-pale: var(--brand-green-light);
  --teal: var(--brand-ink);
  --teal-deep: var(--brand-green-dark);
  --green-deep: var(--brand-green-dark);
  --yellow-deep: var(--brand-ink);
  --ink: var(--brand-ink);
  --muted: var(--brand-muted);
  --surface-alt: var(--brand-blue-light);

  /* Independent explorer typography; no organisation navigation is mounted. */
  --font-body: "Barlow", sans-serif;
  --font-ui: "Barlow Semi Condensed", sans-serif;
  --font-display: "Barlow Semi Condensed", sans-serif;
  --font-organisation: "Fat Frank", Helvetica, Arial, Lucida, sans-serif;
  font-family: var(--font-body);
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

.site-header nav,
.site-menu,
.header-action,
.primary-action,
.light-action,
.eyebrow,
.scene-step,
.movement-rail,
.filter-row,
.map-legend,
.world-tools,
.insight-tabs,
.partner-inventory,
.program-partners > a {
  font-family: var(--font-ui);
}

h1,
h2,
.hero-stats dt,
.site-totals strong,
.record-stats strong,
.site-brand strong {
  font-family: var(--font-display);
  font-weight: 800;
}

::selection {
  color: var(--brand-ink);
  background: var(--brand-yellow-hero);
}

:focus-visible {
  outline-color: var(--brand-ink);
}



/* Slim return bar to the main ECOllaboration site (integration issue #29) */
.eco-return-bar { background: #143f48; color: #eef8fa; font-size: .8rem; }
.eco-return-bar > div { max-width: 1200px; margin: 0 auto; padding: .4rem clamp(1rem, 4vw, 2.5rem); display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.eco-return-bar span { opacity: .85; }
.eco-return-bar a { color: #f8e04e; font-weight: 700; text-decoration: none; }
.eco-return-bar a:hover, .eco-return-bar a:focus-visible { text-decoration: underline; }
.eco-return-bar a:focus-visible { outline: 2px solid #f8e04e; outline-offset: 2px; }
@media print { .eco-return-bar { display: none; } }

/* Branded fallback shown only when an automatic compatibility redirect cannot run. */
.redirect-page { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 1.25rem; color: var(--brand-ink); background: radial-gradient(circle at 15% 15%,rgba(248,224,78,.45),transparent 25%),linear-gradient(135deg,var(--brand-blue-light),var(--brand-green-light)); }
.redirect-page main { width: min(100%,520px); padding: clamp(1.5rem,6vw,2.75rem); border: 1px solid rgba(16,44,51,.16); border-radius: 24px; background: #fff; box-shadow: 0 24px 70px rgba(16,44,51,.17); }
.redirect-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 2rem; color: var(--brand-ink); text-decoration: none; }
.redirect-brand img { width: 80px; height: 52px; object-fit: contain; }
.redirect-brand span { display: grid; gap: .1rem; }
.redirect-brand small { color: var(--brand-muted); }
.redirect-page h1 { margin: 0 0 1rem; font-size: clamp(2rem,8vw,3.2rem); line-height: 1; letter-spacing: -.035em; }
.redirect-page p { margin: 0; color: var(--brand-muted); line-height: 1.65; }
.redirect-page .redirect-action { display: inline-flex; min-height: 48px; align-items: center; margin-top: 1.5rem; padding: .75rem 1rem; border-radius: 8px; background: var(--brand-yellow-hero); color: var(--brand-ink); font: 700 1rem/1.3 var(--font-ui); text-decoration: none; }
.redirect-page .redirect-action:hover { text-decoration: underline; text-underline-offset: 4px; }