/* MBON webfonts.
   Display: Space Grotesk — geometric, scientific, a touch editorial.
   Body/UI: IBM Plex Sans — humanist, scientific heritage, highly legible.
   Data:    IBM Plex Mono — coordinates, station codes, taxonomy tags, captions.

   NOTE: The original marinebon.org Hugo theme shipped no brand typeface
   (Bootstrap defaults). This trio is a deliberate MBON choice. Loaded from
   Google Fonts here; self-host the .woff2 files for production. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================================
   MBON · COLOR TOKENS
   An ocean palette: deep-sea navies, the cobalt of the wordmark, living-reef
   teal, and warm coral drawn from the biodiversity imagery. Facet colors
   encode the four ways MBON content interrelates (Region / Tool / Org / Type).
   ========================================================================== */

:root {
  /* ---- Deep water: structural darks (headers, hero, footer) ------------- */
  --abyss-900: #04131f;   /* near-black blue — deepest backgrounds          */
  --abyss-800: #082336;   /* deep panels over photography                   */
  --navy-700:  #01375f;   /* deep sea — primary dark surface (facet: Region)*/
  --navy-600:  #0a4f7a;
  --navy-500:  #136a96;

  /* ---- Cobalt: the MBON wordmark blue, primary brand -------------------- */
  --cobalt-600: #1c44a0;
  --cobalt-500: #2456b8;  /* logo blue — primary brand / buttons            */
  --cobalt-400: #3f74d6;
  --cobalt-300: #79a3e8;

  /* ---- Current: living-reef teal, the interactive accent ---------------- */
  --teal-600: #15788f;
  --teal-500: #1c91ab;
  --teal-400: #38a7bb;    /* legacy products accent — links, active state   */
  --teal-300: #74c8d6;
  --aqua-200: #aee2ea;
  --aqua-100: #d9f1f5;

  /* ---- Coral & sun: warm highlights from the reef imagery --------------- */
  --coral-600: #d24a2e;
  --coral-500: #f2683f;   /* primary warm accent — CTAs, emphasis           */
  --coral-300: #f7a98c;
  --sun-400:   #f5b53f;   /* sunlight / data highlight                      */

  /* ---- Ink & neutrals: cool greys with a blue cast ---------------------- */
  --ink-900: #0f2230;     /* darkest text on light                          */
  --ink-700: #1f3947;     /* headings (legacy products heading)             */
  --ink-500: #44606e;     /* body text                                      */
  --ink-400: #5b6b74;     /* secondary text                                 */
  --ink-300: #8499a3;     /* muted / captions                               */
  --line-300: #c6d4db;    /* strong borders                                 */
  --line-200: #dbe5ea;    /* default borders                                */
  --line-100: #e9f0f3;    /* hairlines / dividers                           */
  --foam-100: #f1f7f9;    /* tinted surface                                 */
  --foam-50:  #f6fafb;    /* page background                                */
  --white:    #ffffff;

  /* ---- Facet colors: tag taxonomy prefixes ------------------------------ */
  --facet-place:   #01375f;  /* navy   — geographic places / regions        */
  --facet-method:  #15788f;  /* teal   — observing methods                  */
  --facet-org:     #1a7a4e;  /* kelp   — organizations / partners           */
  --facet-type:    #b5651d;  /* amber  — content/tool types                 */
  --facet-topic:   #44606e;  /* ink    — general topics                     */
  --facet-portal:  #6d4aa7;  /* violet — data portals (OBIS/GBIF/EDI/ERDDAP)*/
  --facet-content: #a83b6f;  /* berry  — content type (Tools/Papers/…)      */
  --facet-year:    var(--ink-500);  /* neutral ink — publication years      */
  /* legacy aliases kept for backward compat */
  --facet-region:  var(--facet-place);
  --facet-tool:    var(--facet-type);
  /* NOTE: a tag facet with no --facet-<name> token here is auto-assigned a
     deterministic color at runtime by static/js/tag-filter.js (genColor), so a
     newly-introduced facet still renders colored pills. Define a token here to
     override that automatic color. */
  /* darker variants for borders */
  --facet-place-deep:  #002843;
  --facet-method-deep: #0d5a6b;
  --facet-org-deep:    #015f37;
  --facet-type-deep:   #884501;
  --facet-topic-deep:  #2c4550;
  --facet-portal-deep: #4f3380;

  /* ---- Semantic status -------------------------------------------------- */
  --ok:   #1a7a4e;
  --warn: #c9821f;
  --err:  #c23b34;
  --info: #2456b8;

  /* ============ SEMANTIC ALIASES — prefer these in components ============ */
  --bg-page:        var(--foam-50);
  --bg-surface:     var(--white);
  --bg-tint:        var(--foam-100);
  --bg-inverse:     var(--navy-700);
  --bg-abyss:       var(--abyss-900);

  --text-strong:    var(--ink-900);
  --text-heading:   var(--ink-700);
  --text-body:      var(--ink-500);
  --text-muted:     var(--ink-300);
  --text-on-dark:   #eaf3f7;
  --text-on-dark-muted: #9db9c7;

  --brand:          var(--cobalt-500);
  --brand-hover:    var(--cobalt-600);
  --accent:         var(--teal-400);
  --accent-hover:   var(--teal-600);
  --action:         var(--coral-500);
  --action-hover:   var(--coral-600);
  --link:           var(--teal-600);

  --border:         var(--line-200);
  --border-strong:  var(--line-300);
  --divider:        var(--line-100);

  --focus-ring:     var(--cobalt-400);
}

/* ============================================================================
   MBON · TYPOGRAPHY TOKENS
   Space Grotesk (display) · IBM Plex Sans (body/UI) · IBM Plex Mono (data)
   ========================================================================== */

:root {
  /* ---- Families -------------------------------------------------------- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* ---- Weights ----------------------------------------- @kind font ---- */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-semibold:600;  /* @kind font */
  --fw-bold:    700;  /* @kind font */

  /* ---- Type scale (1.20 minor-third, 16px base) ------------------------ */
  --text-xs:   0.75rem;   /* 12 — mono labels, captions       */
  --text-sm:   0.875rem;  /* 14 — secondary, meta             */
  --text-base: 1rem;      /* 16 — body                        */
  --text-md:   1.125rem;  /* 18 — lead body                   */
  --text-lg:   1.375rem;  /* 22 — card titles                 */
  --text-xl:   1.75rem;   /* 28 — section subheads            */
  --text-2xl:  2.25rem;   /* 36 — section heads               */
  --text-3xl:  3rem;      /* 48 — page titles                 */
  --text-4xl:  4rem;      /* 64 — hero                        */
  --text-5xl:  5.25rem;   /* 84 — display / numerals          */

  /* ---- Line heights ---------------------------------------------------- */
  --lh-tight:  1.05;  /* @kind font */
  --lh-snug:   1.2;   /* @kind font */
  --lh-normal: 1.5;   /* @kind font */
  --lh-relaxed:1.65;  /* @kind font */

  /* ---- Letter spacing -------------------------------------------------- */
  --ls-tight:  -0.02em;  /* @kind font */
  --ls-normal: 0;        /* @kind font */
  --ls-wide:   0.02em;   /* @kind font */
  --ls-label:  0.14em;   /* @kind font */

  /* ============ SEMANTIC TYPE ROLES ============ */
  --type-hero:    var(--fw-bold) var(--text-4xl)/var(--lh-tight) var(--font-display);
  --type-title:   var(--fw-bold) var(--text-3xl)/var(--lh-snug)  var(--font-display);
  --type-h2:      var(--fw-semibold) var(--text-2xl)/var(--lh-snug) var(--font-display);
  --type-h3:      var(--fw-semibold) var(--text-xl)/var(--lh-snug)  var(--font-display);
  --type-card:    var(--fw-semibold) var(--text-lg)/var(--lh-snug)  var(--font-display);
  --type-lead:    var(--fw-regular) var(--text-md)/var(--lh-relaxed) var(--font-sans);
  --type-body:    var(--fw-regular) var(--text-base)/var(--lh-normal) var(--font-sans);
  --type-small:   var(--fw-regular) var(--text-sm)/var(--lh-normal) var(--font-sans);
  --type-label:   var(--fw-medium) var(--text-xs)/1 var(--font-mono);
}

/* ============================================================================
   MBON · SPACING, RADII, SHADOW & MOTION TOKENS
   ========================================================================== */

:root {
  /* ---- Spacing scale (4px base) ---------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /*128 */

  /* ---- Layout ---------------------------------------------------------- */
  --container:    1200px;
  --container-wide:1380px;
  --gutter:       var(--space-5);
  --section-y:    var(--space-7);

  /* ---- Radii — restrained; the wordmark is sharp & geometric ----------- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Borders --------------------------------------------------------- */
  --border-width: 1px;  /* @kind spacing */
  --border-thick: 2px;  /* @kind spacing */

  /* ---- Shadows — cool, low, like light through water ------------------- */
  --shadow-xs: 0 1px 2px rgba(8, 35, 54, 0.06);
  --shadow-sm: 0 2px 6px rgba(8, 35, 54, 0.07);
  --shadow-md: 0 6px 18px rgba(8, 35, 54, 0.10);
  --shadow-lg: 0 14px 38px rgba(8, 35, 54, 0.14);
  --shadow-xl: 0 28px 64px rgba(4, 19, 31, 0.22);
  /* tinted glow for interactive emphasis */
  --shadow-teal: 0 8px 24px rgba(28, 145, 171, 0.28);
  --shadow-focus: 0 0 0 3px rgba(63, 116, 214, 0.35);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   200ms;  /* @kind other */
  --dur-slow:   400ms;  /* @kind other */
  --dur-slower: 700ms;  /* @kind other */

  /* ---- Z-index --------------------------------------------------------- */
  --z-base: 1;       /* @kind other */
  --z-sticky: 100;   /* @kind other */
  --z-nav: 200;      /* @kind other */
  --z-overlay: 800;  /* @kind other */
  --z-modal: 900;    /* @kind other */
  --z-toast: 1000;   /* @kind other */
}

/* ============================================================================
   MBON · BASE ELEMENTS
   Light resets + element defaults that consume the tokens. Components stay
   self-contained; this gives raw HTML (cards, docs) a correct baseline.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); font-weight: var(--fw-bold); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 1em; line-height: var(--lh-relaxed); text-wrap: pretty; }

a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }

strong { font-weight: var(--fw-semibold); color: var(--text-heading); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--foam-100);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

hr { border: 0; border-top: 1px solid var(--divider); margin: var(--space-6) 0; }

img { max-width: 100%; display: block; }

::selection { background: var(--aqua-200); color: var(--ink-900); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---- Reusable primitives ------------------------------------------------ */

/* mono eyebrow / overline label — pervasive in the MBON system */
.mbon-eyebrow {
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--accent-hover);
}

.mbon-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================================
   MBON · COMPONENTS  (class-based versions of the design-system primitives)
   Mirrors the React components in the design system. Style tweaks live here.
   ========================================================================== */

/* ---- Eyebrow: mono overline ------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--fw-medium);
  text-transform:uppercase; letter-spacing:var(--ls-label); line-height:1;
  color:var(--accent-hover);
}
.eyebrow--rule::before{ content:""; width:1.75em; height:2px; border-radius:2px; background:currentColor; opacity:.8; }
.eyebrow--ondark{ color:var(--teal-300); }

/* ---- Button ----------------------------------------------------------- */
.btn{
  --_bg:var(--brand); --_fg:#fff; --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-sans); font-weight:var(--fw-semibold); font-size:var(--text-base); line-height:1;
  padding:.65em 1.15em; border:1px solid var(--_bd); background:var(--_bg); color:var(--_fg);
  border-radius:var(--radius-sm); cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn:hover{ filter:brightness(.94); text-decoration:none; color:var(--_fg); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
.btn--sm{ font-size:var(--text-sm); padding:.5em .9em; }
.btn--lg{ font-size:var(--text-md); padding:.8em 1.5em; }
.btn--accent{ --_bg:var(--accent); }
.btn--action{ --_bg:var(--action); }
.btn--outline{ --_bg:transparent; --_fg:var(--brand); --_bd:var(--border-strong); }
.btn--outline:hover{ filter:none; background:var(--foam-100); border-color:var(--brand); }
.btn--ghost{ --_bg:transparent; --_fg:var(--text-heading); }
.btn--ghost:hover{ filter:none; background:var(--foam-100); }
.btn--on-photo{ --_bg:rgba(255,255,255,0.08); --_fg:#fff; --_bd:rgba(255,255,255,0.5); }
.btn--on-photo:hover{ filter:none; background:rgba(255,255,255,0.16); }
.btn--full{ width:100%; }

/* ---- Tag: faceted taxonomy chip --------------------------------------- */
.tag{
  --_c:var(--ink-500);
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--fw-medium);
  letter-spacing:var(--ls-wide); line-height:1; padding:.4em .75em; border-radius:var(--radius-pill);
  border:1px solid color-mix(in srgb, var(--_c) 35%, transparent);
  color:var(--_c); background:color-mix(in srgb, var(--_c) 8%, var(--white));
  cursor:default; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tag--place{  --_c:var(--facet-place); }
.tag--method{ --_c:var(--facet-method); }
.tag--org{    --_c:var(--facet-org); }
.tag--type{   --_c:var(--facet-type); }
.tag--topic{  --_c:var(--facet-topic); }
.tag--portal{ --_c:var(--facet-portal); }
.tag--content{ --_c:var(--facet-content); }
/* year tags — neutral ink */
.tag--year{   --_c:var(--ink-500,#64748b); }
/* legacy aliases */
.tag--region{ --_c:var(--facet-place); }
.tag--tool{   --_c:var(--facet-type); }
button.tag{ cursor:pointer; }
button.tag:hover{ background:color-mix(in srgb, var(--_c) 16%, var(--white)); }
/* a.tag — clickable tag chips (single pages, /tags index) link to their term page */
a.tag{ cursor:pointer; text-decoration:none; }
a.tag:hover{ background:color-mix(in srgb, var(--_c) 18%, var(--white)); }
.tag.is-active{ background:var(--_c); color:#fff; border-color:var(--_c); }
.tag__dot{ width:.5em; height:.5em; border-radius:50%; background:currentColor; }
/* /tags index: a tag chip plus its usage count */
.tag-link{ display:inline-flex; align-items:center; gap:.4em; text-decoration:none; }
.tag__count{ font-family:var(--font-mono); font-size:.68rem; color:var(--text-muted); }

/* ---- Badge ------------------------------------------------------------ */
.badge{
  --_c:var(--info);
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--fw-semibold);
  text-transform:uppercase; letter-spacing:var(--ls-wide); line-height:1;
  padding:.35em .6em; border-radius:var(--radius-xs);
  color:var(--_c); background:color-mix(in srgb, var(--_c) 12%, var(--white));
}
.badge--solid{ color:#fff; background:var(--_c); }
.badge--ok{ --_c:var(--ok); }
.badge--accent{ --_c:var(--teal-600); }
.badge--type{ --_c:var(--facet-type); }
.badge__dot{ width:.5em; height:.5em; border-radius:50%; background:currentColor; }

/* ---- Stat ------------------------------------------------------------- */
.stat{ display:flex; flex-direction:column; gap:.15em; }
.stat__value{ font-family:var(--font-mono); font-weight:var(--fw-semibold); line-height:1; color:var(--cobalt-500); font-size:var(--text-2xl); }
.stat__label{ font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--text-muted); }
.stat--ondark .stat__value{ color:#fff; }
.stat--ondark .stat__label{ color:var(--teal-300); }

/* homepage FAQ accordion (details/summary) */
.faq-item{ border-top:1px solid var(--border); }
.faq-item:last-child{ border-bottom:1px solid var(--border); }
.faq-item summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); padding:var(--space-4) 0; font-size:var(--text-lg); font-weight:var(--fw-semibold); color:var(--text-heading); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family:var(--font-mono); font-weight:var(--fw-normal); color:var(--accent-hover); flex-shrink:0; }
.faq-item[open] summary::after{ content:"\2013"; }
.faq-item__a{ padding:0 0 var(--space-5); max-width:64ch; color:var(--text-body); line-height:1.7; }

/* contact form (posts to the Apps Script web app; see scripts/contact-form.gs) */
.contact-form{ display:flex; flex-direction:column; gap:var(--space-4); }
.contact-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
@media (max-width:600px){ .contact-form__row{ grid-template-columns:1fr; } }
.contact-form label{ display:flex; flex-direction:column; gap:var(--space-2); font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--text-muted); }
.contact-form label span[aria-hidden]{ color:var(--accent-hover); margin-left:2px; }
.contact-form__hint{ text-transform:none; letter-spacing:0; font-weight:var(--fw-normal); opacity:.7; }
.contact-form input, .contact-form textarea{ font:inherit; font-family:var(--font-sans); font-size:var(--text-base); text-transform:none; letter-spacing:normal; color:var(--text-heading); background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); width:100%; box-sizing:border-box; }
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--teal-300); box-shadow:0 0 0 3px rgba(0,150,170,.15); }
.contact-form textarea{ resize:vertical; }
.contact-form input[type=file]{ padding:var(--space-3); font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted); }
.contact-form button{ align-self:flex-start; }
.contact-status{ font-size:var(--text-sm); margin:var(--space-2) 0 0; min-height:1.2em; }
.contact-status--ok{ color:var(--facet-method, #0a7d54); font-weight:var(--fw-medium); }
.contact-status--error{ color:#c0392b; font-weight:var(--fw-medium); }

/* ---- Card: content / product / news ----------------------------------- */
.card{
  display:flex; flex-direction:column; background:var(--bg-surface);
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
  text-decoration:none; color:inherit; height:100%;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
a.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--teal-300); text-decoration:none; color:inherit; }
.card__media{ position:relative; aspect-ratio:16/10; background:var(--foam-100); overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
a.card:hover .card__media img{ transform:scale(1.04); }
.card__media--placeholder{ background:linear-gradient(135deg, var(--navy-700) 0%, var(--abyss-900) 100%); }
.card__badge{ position:absolute; top:var(--space-3); left:var(--space-3); }
.card__body{ display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-5); flex:1; }
.card__tags{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.card__title{ font:var(--type-card); color:var(--text-heading); letter-spacing:var(--ls-tight); margin:0; }
.card__summary{ font:var(--type-small); color:var(--text-body); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card__foot{ margin-top:auto; display:flex; align-items:center; gap:.5em; font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--accent-hover); }
.card__foot i{ transition:transform var(--dur-fast) var(--ease-out); }
a.card:hover .card__foot i{ transform:translateX(3px); }

/* paper card: kind label sits bottom-left on the tinted placeholder */
/* content-type label at the top of every card body (Tool / Working Group / Method / Node / …) */
.card__type{ display:inline-flex; align-items:center; gap:.45em; align-self:flex-start; font-family:var(--font-mono); font-size:.68rem; font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--text-muted); }
.card__type i{ font-size:.95em; opacity:.85; }
.card__type--tools{          color:var(--facet-type); }
.card__type--working-groups{ color:var(--facet-org); }
.card__type--methods{        color:var(--facet-method); }
.card__type--network{        color:var(--facet-place); }
.card__type--datasets{       color:var(--facet-portal); }
.card__type--papers{         color:var(--ink-400); }
.card__type--news{           color:var(--coral-600); }
.card__type--events{         color:var(--teal-600); }
.card--paper .card__media{ aspect-ratio:16/7; }

/* event card: date chip + location row (no media) */
.card--event{ border-left:3px solid var(--teal-600); }
.event-card__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; }
.event-card__loc{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted); letter-spacing:.02em; }

/* dataset card: portal-tinted placeholder carries portal name + record count */
.card__media--portal{ display:flex; flex-direction:column; justify-content:space-between; padding:var(--space-4);
  background:linear-gradient(135deg, var(--_pc,var(--facet-portal)) 0%, var(--abyss-900) 118%); }
.card__media--portal[data-portal="OBIS"]{   --_pc:#2c6f8c; }
.card__media--portal[data-portal="GBIF"]{   --_pc:#4ba258; }
.card__media--portal[data-portal="EDI"]{    --_pc:#1f6f9c; }
.card__media--portal[data-portal="ERDDAP"]{ --_pc:#c4702a; }
.card__portal{ align-self:flex-start; font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--fw-semibold);
  text-transform:uppercase; letter-spacing:var(--ls-wide); color:#fff;
  background:rgba(0,0,0,.28); padding:.3em .65em; border-radius:var(--radius-xs); }
.card__records{ align-self:flex-start; font-family:var(--font-mono); font-size:var(--text-xs); color:var(--aqua-100);
  display:flex; align-items:center; gap:.45em; }

/* dataset single page: metadata panel + cross-portal access */
.ds-meta{ display:flex; gap:var(--space-7); align-items:center; flex-wrap:wrap;
  padding-bottom:var(--space-5); margin-bottom:var(--space-5); border-bottom:1px solid var(--divider); }
.ds-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--space-3) var(--space-6); margin:0; flex:1; }
.ds-facts div{ display:flex; flex-direction:column; gap:.15em; }
.ds-facts dt{ font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--text-muted); }
.ds-facts dd{ margin:0; font-size:var(--text-sm); color:var(--text-body); word-break:break-word; }
.ds-sources{ margin-bottom:var(--space-6); }
.ds-note{ margin-top:var(--space-3); font-size:var(--text-sm); color:var(--text-muted); display:flex; align-items:center; gap:.5em; }

/* on-page contribution bar (Suggest an edit / Edit on GitHub) */
.edit-cta{ border-top:1px solid var(--divider); background:var(--bg-surface); }
.edit-cta__inner{ max-width:var(--container-wide); margin:0 auto; padding:var(--space-5) var(--space-6); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
.edit-cta__label{ font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--text-muted); }
.edit-cta__links{ display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-sm); }
.edit-cta__links a{ color:var(--accent); text-decoration:none; font-weight:var(--fw-semibold); }
.edit-cta__links a:hover{ text-decoration:underline; }
.edit-cta__sep{ color:var(--text-muted); }

/* ---- Methods band ----------------------------------------------------- */
.methods-band{
  background:var(--abyss-900);
  padding:var(--space-10) 0;
}
.methods-band__inner{
  display:grid;
  grid-template-columns:1fr 2.4fr;
  gap:var(--space-8);
  align-items:center;
}
@media(max-width:900px){
  .methods-band__inner{ grid-template-columns:1fr; }
}

/* scene: illustration container with absolutely-placed hotspots.
   overflow must stay visible so tooltip cards can escape the image boundary. */
.methods-scene{ position:relative; }
.methods-scene__img{ width:100%; display:block; border-radius:var(--radius-lg); }

/* individual hotspot wrapper — position set via inline style */
.method-spot{
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* pulsing ring pin */
.method-spot__pin{
  width:1.25rem; height:1.25rem; border-radius:50%;
  background:var(--teal-300); border:2px solid rgba(255,255,255,.85);
  cursor:pointer; padding:0;
  flex-shrink:0;
  animation:spot-pulse 2.6s ease-in-out infinite;
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.method-spot__pin:hover,
.method-spot__pin:focus-visible{
  background:var(--coral-500);
  transform:scale(1.2);
  outline:none;
  box-shadow:var(--shadow-focus);
}
@keyframes spot-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(116,200,214,.55); }
  50%     { box-shadow:0 0 0 10px rgba(116,200,214,0); }
}

/* label: always visible below the pin */
.method-spot__label{
  display:block;
  margin-top:.25rem;
  font-family:var(--font-mono);
  font-size:.58rem;
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
  letter-spacing:var(--ls-wide);
  color:#fff;
  text-align:center;
  white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6);
  pointer-events:none;
}

/* tooltip card — hidden by default, shown by CSS hover/focus or JS class */
.method-spot__tip{
  display:none;
  position:absolute;
  bottom:calc(100% + .6rem);
  left:50%;
  transform:translateX(-50%);
  width:220px;
  background:var(--abyss-800);
  border:1px solid var(--teal-600);
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);
  color:var(--text-on-dark);
  box-shadow:0 8px 28px rgba(0,0,0,.65);
  z-index:20;
  pointer-events:auto;
}
/* flip card below pin when hotspot is near the top of image */
.method-spot--top .method-spot__tip{
  bottom:auto;
  top:calc(100% + .6rem);
}
/* anchor card to the right edge of pin for right-edge hotspots */
.method-spot--right .method-spot__tip{
  left:auto;
  right:0;
  transform:none;
}
/* anchor card to the left edge of pin for left-edge hotspots */
.method-spot--left .method-spot__tip{
  left:0;
  transform:none;
}
/* show tip on hover/focus (desktop) or JS-toggled class (mobile) */
.method-spot:hover .method-spot__tip,
.method-spot:focus-within .method-spot__tip,
.method-spot.is-active .method-spot__tip{ display:block; }
/* elevate the entire spot so its tip clears sibling pins */
.method-spot:hover,
.method-spot:focus-within,
.method-spot.is-active{ z-index:30; }
.method-spot__tip strong{
  display:block;
  color:#fff;
  font-size:var(--text-sm);
  margin-bottom:.35rem;
}
.method-spot__tip p{
  font-size:var(--text-xs);
  color:var(--text-on-dark-muted);
  margin:0 0 .5rem;
  line-height:1.5;
}
.method-spot__tip a{
  font-size:var(--text-xs);
  color:var(--teal-300);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.35em;
}
.method-spot__tip a:hover{ color:var(--aqua-200); text-decoration:underline; }

/* ---- Papers list ---------------------------------------------------------- */
.paper-list{
  list-style:none; margin:var(--space-6) 0 0; padding:0;
  display:flex; flex-direction:column; gap:0;
}
.paper-row{
  display:grid;
  grid-template-columns:4rem 1fr;
  gap:var(--space-4);
  align-items:start;
  padding:var(--space-4) 0;
  border-bottom:1px solid var(--border);
  transition:background var(--dur-fast) var(--ease-out);
}
.paper-row:last-child{ border-bottom:none; }
.paper-row__year{
  font-family:var(--font-mono); font-size:var(--text-sm); font-weight:var(--fw-semibold);
  color:var(--text-muted); line-height:1.4; padding-top:.15em; text-align:right;
}
.paper-row__body{ display:flex; flex-direction:column; gap:var(--space-1); }
.paper-row__title{
  font:var(--type-card); color:var(--text-heading); text-decoration:none; line-height:1.4;
}
.paper-row__title:hover{ color:var(--accent); text-decoration:underline; }
.paper-row__meta{
  font-size:var(--text-sm); color:var(--text-muted); line-height:1.4;
}
.paper-row__journal{ font-style:italic; }
.paper-row__tags{ display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:var(--space-2); }

/* ---- Citation block (single paper page) ----------------------------------- */
.citation-block{
  background:var(--bg-tint,var(--foam-100)); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:var(--space-6);
}
.citation-block__authors{
  font-size:var(--text-sm); color:var(--text-muted); margin:0 0 var(--space-3);
}
.citation-block__ref{
  font-size:var(--text-base); line-height:1.6; margin:0 0 var(--space-3);
}
.citation-block__doi{
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--accent);
  text-decoration:none; white-space:nowrap;
}
.citation-block__doi:hover{ text-decoration:underline; }

/* ---- Unified tag filter + search control -------------------------------- */
/* One row: free-text + a "Filter by tag" dropdown of colorized pills; a second
   row shows the selected tags as removable chips. Used on the list pages (DOM
   filtering) and /search/ (Pagefind). See static/js/tag-filter.js. */
.tag-filter{ margin-bottom:var(--space-6); }
.tag-filter__bar{
  display:flex; align-items:center; gap:var(--space-2);
  border:2px solid var(--border-strong); border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-4); background:var(--bg-surface);
  transition:border-color var(--dur-fast) var(--ease-out);
}
.tag-filter__bar:focus-within{ border-color:var(--brand); }
.tag-filter__icon{ color:var(--text-muted); font-size:var(--text-md); flex-shrink:0; }
.tag-filter__text{
  flex:1; min-width:0; border:none; outline:none; font-size:var(--text-base);
  background:transparent; color:var(--text-heading);
}
.tag-filter__add{ position:relative; flex-shrink:0; border-left:1px solid var(--border); padding-left:var(--space-3); }
.tag-filter__add-btn{
  display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  border:none; background:none; color:var(--text-body);
  font-family:var(--font-mono); font-size:var(--text-sm); letter-spacing:var(--ls-wide);
  padding:.25em .1em;
}
.tag-filter__add-btn:hover{ color:var(--brand); }
.tag-filter__caret{ font-size:.7em; transition:transform var(--dur-base) var(--ease-out); }
.tag-filter__add-btn[aria-expanded="true"] .tag-filter__caret{ transform:rotate(180deg); }
.tag-filter__panel{
  position:absolute; top:calc(100% + 8px); right:0; z-index:50;
  width:min(92vw, 420px); max-height:min(60vh, 460px); overflow-y:auto;
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:var(--space-3);
}
.tag-filter__panel-search{
  width:100%; box-sizing:border-box; outline:none;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-3); font-size:var(--text-sm); margin-bottom:var(--space-3);
  background:var(--bg-page); color:var(--text-body);
}
.tag-filter__panel-search:focus{ border-color:var(--brand); }
.tag-filter__group{ margin-bottom:var(--space-3); }
.tag-filter__group:last-child{ margin-bottom:0; }
.tag-filter__group-label{
  display:block; font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing:var(--ls-wide); padding-bottom:var(--space-2); margin-bottom:var(--space-2);
  border-bottom:1px solid var(--divider);
}
.tag-filter__group-pills{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.tag-filter__empty-tags{ font-size:var(--text-sm); color:var(--text-muted); margin:0; padding:var(--space-2); }
.tag-filter__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-top:var(--space-3); }
.tag-filter__chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.tag-filter__count{ margin-left:auto; font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted); }
.tag-filter__status{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted); margin:var(--space-3) 0 0; }
.tag-filter__results{ margin-top:var(--space-6); }
/* phones: the tag adder drops below the text input instead of crowding it */
@media (max-width:560px){
  .tag-filter__bar{ flex-wrap:wrap; }
  .tag-filter__text{ flex:1 1 60%; }
  .tag-filter__add{ width:100%; border-left:none; padding-left:0; margin-top:var(--space-2); padding-top:var(--space-2); border-top:1px solid var(--border); }
  .tag-filter__panel{ width:100%; }
  .tag-filter__count{ margin-left:0; }
}

/* ---- Search results (shared by /search/, /404, and the tag filter) ------- */
.tag-chip{ display:inline-flex; align-items:center; gap:.4em; }
.tag-chip button{ border:none; background:none; cursor:pointer; font-size:1em; padding:0; line-height:1; color:inherit; opacity:.7; }
.tag-chip button:hover{ opacity:1; }
.search-widget__results{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--space-8); }
/* grouped results: a type header above each cluster of cards */
.search-group{ list-style:none; }
.search-group__head{
  display:flex; align-items:center; gap:.6em;
  font-family:var(--font-mono); font-size:var(--text-sm); font-weight:var(--fw-semibold);
  text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--text-heading);
  padding-bottom:var(--space-2); margin-bottom:var(--space-5);
  border-bottom:2px solid var(--border-strong);
}
.search-group__count{ font-size:var(--text-xs); font-weight:var(--fw-medium); color:var(--text-muted); letter-spacing:0; }
.search-group__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-6); }
.search-result{ border-bottom:1px solid var(--border); padding-bottom:var(--space-5); }
.search-result:last-child{ border-bottom:none; }
.search-result--media{ display:flex; gap:var(--space-4); align-items:flex-start; }
.search-result__media{ position:relative; flex:0 0 132px; aspect-ratio:16/10; border-radius:var(--radius-md); overflow:hidden; background:var(--foam-100); }
.search-result__media img{ width:100%; height:100%; object-fit:cover; }
.search-result__badge{ position:absolute; top:var(--space-2); left:var(--space-2); }
.search-result__main{ flex:1; min-width:0; }
.search-result__kind{ display:inline-block; margin-bottom:var(--space-2); font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--text-muted); }
.search-result__title{ font:var(--type-card); color:var(--text-heading); text-decoration:none; display:block; margin-bottom:var(--space-2); }
.search-result__title:hover{ color:var(--accent); text-decoration:underline; }
.search-result__excerpt{ font-size:var(--text-sm); color:var(--text-body); line-height:1.6; margin:0; }
@media (max-width:480px){ .search-result__media{ flex-basis:96px; } }

/* ---- 404 page — deep-sea "lost at depth" ------------------------------- */
.err404{
  position:relative;
  background:var(--abyss-900);
  overflow:hidden;
}

/* ocean atmosphere layer */
.err404__ocean{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

/* volumetric light shafts filtering down from the surface */
.err404__rays{
  position:absolute;
  inset:0;
  background:
    conic-gradient(from 268deg at 18% -4%, transparent 0deg, rgba(28,145,171,.07) 9deg,  transparent 16deg),
    conic-gradient(from 265deg at 52% -6%, transparent 0deg, rgba(63,116,214,.05) 7deg,   transparent 13deg),
    conic-gradient(from 272deg at 78% -2%, transparent 0deg, rgba(28,145,171,.06) 11deg, transparent 18deg);
  animation:err404-rays 22s ease-in-out infinite alternate;
}
@keyframes err404-rays{
  from{ transform:scaleX(1);           opacity:.75; }
  to  { transform:scaleX(1.06) rotate(.8deg); opacity:1;  }
}

/* bioluminescent particle bubbles */
.err404__particles{ position:absolute; inset:0; }
.err404__particle{
  position:absolute;
  bottom:-16px;
  border-radius:50%;
  border:1px solid rgba(174,226,234,.45);
  background:radial-gradient(circle at 35% 35%, rgba(174,226,234,.35), transparent 70%);
  animation:err404-particle linear infinite;
  will-change:transform,opacity;
}
@keyframes err404-particle{
  0%  { transform:translateY(0)     translateX(0);  }
  33% { transform:translateY(-30vh) translateX(6px);  }
  66% { transform:translateY(-65vh) translateX(-4px); }
  100%{ transform:translateY(-115vh) translateX(3px); opacity:0; }
}

/* wave break between dark ocean and light search surface */
.err404__wave{
  position:absolute;
  bottom:0; left:0;
  width:100%; height:88px;
  display:block;
}

/* hero content */
.err404__hero{
  position:relative;
  z-index:1;
  text-align:center;
  padding:var(--space-9) var(--space-5) calc(var(--space-9) + 68px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-3);
}

.err404__numeral{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:clamp(6rem, 22vw, 14rem);
  line-height:1;
  letter-spacing:-.04em;
  color:transparent;
  background:linear-gradient(160deg, var(--aqua-100) 0%, var(--teal-300) 36%, var(--cobalt-300) 70%, var(--navy-500) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 52px rgba(28,145,171,.5)) drop-shadow(0 0 18px rgba(174,226,234,.35));
  animation:err404-glow 7s ease-in-out infinite alternate;
  user-select:none;
  margin:var(--space-2) 0;
}
@keyframes err404-glow{
  from{ filter:drop-shadow(0 0 40px rgba(28,145,171,.38)) drop-shadow(0 0 12px rgba(174,226,234,.22)); }
  to  { filter:drop-shadow(0 0 72px rgba(28,145,171,.62)) drop-shadow(0 0 30px rgba(174,226,234,.52)); }
}

.err404__title{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:clamp(1.75rem, 4vw, var(--text-3xl));
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-tight);
  color:var(--text-on-dark);
  margin:0;
}

.err404__lead{
  font:var(--type-lead);
  color:var(--text-on-dark-muted);
  max-width:44ch;
  margin:0;
}

/* light surface section — the search area */
.err404__surface{
  position:relative;
  z-index:1;
  background:var(--bg-page);
  padding:var(--space-8) var(--space-5) var(--space-10);
}

.err404__hint{
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  letter-spacing:var(--ls-wide);
  color:var(--text-muted);
  text-align:center;
  margin-bottom:var(--space-5);
}
.err404__hint em{
  color:var(--accent);
  font-style:normal;
  font-weight:var(--fw-semibold);
}

.err404__actions{
  display:flex;
  justify-content:center;
  gap:var(--space-3);
  margin-top:var(--space-7);
  flex-wrap:wrap;
}

/* ============================================================================
   MBON · LAYOUT  (page chrome, sections, grids). Edit spacing/structure here.
   ========================================================================== */

.container{ width:100%; max-width:var(--container-wide); margin-inline:auto; padding-inline:var(--space-6); }
@media (max-width:600px){ .container{ padding-inline:var(--space-4); } }
.section{ padding-block:var(--section-y); }
.section--tint{ background:var(--foam-100); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-6); }
.section-head h2{ margin:var(--space-2) 0 0; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
.grid-auto{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--space-5); }
@media (max-width:860px){ .grid-3{ grid-template-columns:1fr; } }

/* ---- Header ----------------------------------------------------------- */
.site-header{ position:sticky; top:0; z-index:var(--z-nav); background:rgba(255,255,255,0.88); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.site-header__inner{ max-width:var(--container-wide); margin:0 auto; padding:0 var(--space-6); height:72px; display:flex; align-items:center; gap:var(--space-6); }
.site-header__logo img{ height:34px; display:block; }
.site-nav{ display:flex; gap:var(--space-2); margin-left:auto; align-items:center; }
.site-nav a{ font-family:var(--font-sans); font-size:var(--text-sm); font-weight:600; color:var(--text-heading); padding:8px 12px; border-radius:var(--radius-sm); text-decoration:none; }
.site-nav a:hover{ background:var(--foam-100); text-decoration:none; }
.site-nav a.is-active{ color:var(--brand); background:var(--foam-100); }
.site-nav__sep{ width:1px; height:24px; background:var(--border); margin:0 6px; }
/* ---- Nav dropdown ----------------------------------------------------- */
.nav-dropdown{ position:relative; display:inline-flex; align-items:center; }
.nav-dropdown > a{ display:flex; align-items:center; gap:.35em; }
.nav-dropdown__caret{ font-size:.65em; transition:transform var(--dur-base) var(--ease-out); }
.nav-dropdown:hover .nav-dropdown__caret,
.nav-dropdown:focus-within .nav-dropdown__caret{ transform:rotate(180deg); }
.nav-dropdown__panel{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:var(--space-4); z-index:300;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); min-width:440px;
  opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease-out);
}
/* invisible bridge filling the gap between trigger and panel so hover doesn't drop */
.nav-dropdown__panel::before{
  content:""; position:absolute; top:-12px; left:0; right:0; height:12px;
}
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel{ opacity:1; pointer-events:auto; }
.nav-dropdown__panel--single{ min-width:200px; }
.nav-dropdown__label{ display:block; font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--text-muted); padding-bottom:var(--space-2); margin-bottom:var(--space-2); border-bottom:1px solid var(--divider); }
.nav-dropdown__col a{ display:block; font-size:var(--text-sm); color:var(--text-body); padding:3px 0; text-decoration:none; white-space:nowrap; }
.nav-dropdown__col a:hover{ color:var(--accent); }

.nav-search{ position:relative; display:flex; align-items:center; }
.nav-search__icon{ position:absolute; left:10px; font-size:12px; color:var(--text-muted); pointer-events:none; }
.nav-search input{ height:32px; padding:0 var(--space-3) 0 28px; border:1px solid var(--border); border-radius:var(--radius-pill); font-size:var(--text-sm); background:var(--foam-100); color:var(--text-heading); width:148px; outline:none; transition:width .2s, border-color .2s; }
.nav-search input:focus{ border-color:var(--accent); width:200px; }
.nav-search input::placeholder{ color:var(--text-muted); }
.nav-toggle{ display:none; }

/* ---- Mobile nav ------------------------------------------------------- */
/* one breakpoint: the header needs ~1260px for the logo + full nav, so below
   that we collapse to a hamburger. The dropdown panels expand inline (stacked,
   scrollable) instead of floating. */
@media (max-width:1024px){
  .nav-toggle{ display:inline-flex; margin-left:auto; background:none; border:none; font-size:24px; line-height:1; color:var(--text-heading); cursor:pointer; padding:8px; }
  .site-nav{ display:none; }
  .site-nav.open{
    display:flex; position:absolute; top:72px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:var(--space-1);
    background:#fff; border-bottom:1px solid var(--border);
    padding:var(--space-3) var(--space-4) var(--space-4);
    max-height:calc(100vh - 72px); overflow-y:auto;
    box-shadow:var(--shadow-lg);
  }
  /* top-level links + dropdown triggers become full-width rows */
  .site-nav > a,
  .nav-dropdown > a{ padding:10px 8px; border-radius:var(--radius-sm); }
  /* stack the trigger above its panel instead of floating beside it */
  .nav-dropdown{ flex-direction:column; align-items:stretch; width:100%; }
  .nav-dropdown > a{ justify-content:space-between; }
  .nav-dropdown__caret{ font-size:.8em; }
  .nav-dropdown__panel{
    position:static; transform:none; opacity:1; pointer-events:auto;
    display:block; box-shadow:none; border:none; border-radius:0;
    background:transparent; padding:0 0 var(--space-2) var(--space-4);
    min-width:0; margin:0;
  }
  .nav-dropdown__panel::before{ display:none; }
  .nav-dropdown__col{ margin-bottom:var(--space-3); }
  .nav-dropdown__col:last-child{ margin-bottom:0; }
  .nav-dropdown__col a{ white-space:normal; padding:7px 0; }
  .site-nav__sep{ display:none; }
  .nav-search{ width:100%; margin-top:var(--space-2); }
  .nav-search input,
  .nav-search input:focus{ width:100%; height:40px; }
  .site-nav .btn{ margin-top:var(--space-2); justify-content:center; }
}

/* ---- Hero ------------------------------------------------------------- */
.hero{ position:relative; min-height:82vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* stronger, deeper scrim so hero text always clears WCAG AA contrast over the photo (incl. bright coral) */
.hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,19,31,0.55) 0%, rgba(4,19,31,0.28) 32%, rgba(4,19,31,0.72) 68%, rgba(4,19,31,0.93) 100%); }
.hero__inner{ position:relative; max-width:var(--container-wide); margin:0 auto; width:100%; padding:0 var(--space-6) var(--space-8); }
.hero h1{ font:var(--type-hero); font-size:clamp(2.5rem,5.2vw,4.5rem); color:#fff; margin:var(--space-4) 0; letter-spacing:var(--ls-tight); max-width:18ch; }
.hero__lead{ font:var(--type-lead); color:rgba(234,243,247,0.92); max-width:52ch; margin-bottom:var(--space-6); }
.hero__actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.stat-strip{ display:flex; flex-wrap:wrap; gap:var(--space-8); margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid rgba(255,255,255,0.18); }
/* homepage stats on their own dark band, centered, below the hero photo */
.stats-band{ background:linear-gradient(180deg, var(--abyss-900), var(--abyss-800)); padding:var(--space-7) 0; }
.stat-strip--center{ justify-content:center; text-align:center; margin-top:0; padding-top:0; border-top:0; }
.stat-strip--center .stat{ align-items:center; }
@media (max-width:600px){
  .hero{ min-height:78vh; }
  .stat-strip{ gap:var(--space-4) var(--space-6); margin-top:var(--space-6); }
}

/* page header (interior pages) */
.page-header{ background:linear-gradient(135deg, var(--abyss-900), var(--navy-700)); color:#fff; }
.page-header__inner{ max-width:var(--container-wide); margin:0 auto; padding:var(--space-8) var(--space-6) var(--space-8); }
.page-header h1{ font:var(--type-hero); font-size:clamp(2.2rem,4vw,3.6rem); color:#fff; margin:var(--space-3) 0; }
.page-header__lead{ font:var(--type-lead); color:var(--text-on-dark-muted); max-width:60ch; }

/* ---- Network globe band ----------------------------------------------- */
.globe-band{ background:linear-gradient(180deg, var(--navy-700), var(--abyss-900)); color:#fff; }
.globe-band__inner{ max-width:var(--container-wide); margin:0 auto; padding:var(--section-y) var(--space-6); display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); align-items:center; }
.globe-stage{ height:min(56vh,520px); min-height:380px; position:relative; }
.globe-stage canvas{ display:block; }
.globe-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(174,226,234,0.7); }
.node-chips{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3) var(--space-4); margin-bottom:var(--space-4); }
.node-chips__col{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-content:flex-start; }
.node-chip-label{ flex-basis:100%; font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--ls-wide); color:rgba(174,226,234,0.45); padding-bottom:var(--space-1); border-bottom:1px solid rgba(255,255,255,0.10); }
.node-chip{ font-family:var(--font-mono); font-size:var(--text-xs); cursor:pointer; padding:6px 12px; border-radius:var(--radius-pill); border:1px solid rgba(174,226,234,0.3); background:transparent; color:var(--aqua-200); transition:all .15s; }
.node-chip.is-active{ border-color:var(--coral-500); background:var(--coral-500); color:#fff; }
.node-card{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-lg); padding:var(--space-4); }
.node-card__coord{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--teal-300); letter-spacing:var(--ls-label); }
.globe-partners{ max-width:var(--container-wide); margin:0 auto; padding:var(--space-6) var(--space-6) var(--space-8); border-top:1px solid rgba(255,255,255,0.08); }
@media (max-width:860px){ .globe-band__inner{ grid-template-columns:1fr; } }

/* ---- Directory cards (regions) ---------------------------------------- */
.node-link{ text-align:left; cursor:pointer; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-5); font:inherit; display:block; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
.node-link:hover{ border-color:var(--teal-300); box-shadow:var(--shadow-md); text-decoration:none; }
.node-link__title{ display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3); }
.node-link__title span.dot{ width:10px; height:10px; border-radius:50%; background:var(--facet-region); flex:none; }
.node-link__title strong{ font:var(--type-card); font-size:var(--text-lg); color:var(--text-heading); }
.node-link p{ color:var(--text-body); font-size:var(--text-sm); margin:0; }

/* ---- Thematic feature ------------------------------------------------- */
.feature-row{ display:flex; gap:var(--space-5); background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-6); align-items:center; }
.feature-row img{ width:84px; height:84px; object-fit:contain; border-radius:var(--radius-md); flex:none; background:#fff; }

/* ---- People grid (About page) ----------------------------------------- */
.people-grid{ display:flex; flex-wrap:wrap; gap:var(--space-6); margin:var(--space-5) 0; }
.person-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-2); width:160px; }
.person-card img{ width:120px; height:120px; object-fit:cover; border-radius:50%; border:2px solid var(--border); margin:0; }
.person-card strong{ font-size:var(--text-sm); color:var(--text-heading); }
.person-card p, .person-card span{ font-size:var(--text-xs); color:var(--text-muted); margin:0; }
@media (max-width:480px){
  .people-grid{ gap:var(--space-5); justify-content:center; }
  .person-card{ width:calc(50% - var(--space-3)); }
}

/* ---- Article ---------------------------------------------------------- */
.article{ max-width:720px; margin:0 auto; padding:var(--space-8) var(--space-6) 0; }
.article__meta{ display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; padding-bottom:var(--space-5); border-bottom:1px solid var(--divider); margin-bottom:var(--space-6); font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--text-muted); }
.article h2{ font:var(--type-h3); margin-top:var(--space-7); }
.article p{ color:var(--text-body); }
.article img{ border-radius:var(--radius-lg); border:1px solid var(--border); margin:var(--space-6) 0; }
.article blockquote{ margin:var(--space-6) 0; padding:var(--space-2) 0 var(--space-2) var(--space-5); border-left:3px solid var(--accent); font:var(--type-h3); font-weight:500; color:var(--text-heading); }
.article-banner{ position:relative; height:52vh; min-height:340px; color:#fff; display:flex; align-items:flex-end; }
.article-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; margin:0; border:0; border-radius:0; }
.article-banner__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,19,31,0.3), rgba(4,19,31,0.85)); }
.article-banner__inner{ position:relative; max-width:820px; margin:0 auto; width:100%; padding:0 var(--space-6) var(--space-7); }
.article-banner h1{ font:var(--type-hero); font-size:clamp(2rem,3.6vw,3.2rem); color:#fff; margin:var(--space-4) 0 0; }

/* ---- Footer ----------------------------------------------------------- */
.site-footer{ background:var(--abyss-900); color:var(--text-on-dark); margin-top:var(--section-y); }
.footer-partners{ border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-partners__inner{ max-width:var(--container-wide); margin:0 auto; padding:var(--space-6); }
.partner-strip{ display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:stretch; margin-top:var(--space-5); }
.partner-chip{ display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:var(--radius-sm); padding:14px 18px; height:72px; box-sizing:border-box; flex:1; }
.partner-chip img{ max-height:44px; max-width:140px; object-fit:contain; display:block; }
/* tiered partner logo grid on /network/partners/ */
.partner-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--space-4); margin-top:var(--space-5); }
.partner-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3); min-height:120px; padding:var(--space-5); background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); text-decoration:none; color:var(--text-muted); transition:box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.partner-tile:hover{ box-shadow:var(--shadow-lg); border-color:var(--teal-300); transform:translateY(-2px); }
.partner-tile img{ max-width:120px; max-height:52px; width:auto; height:auto; object-fit:contain; }
.partner-tile span{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:var(--ls-wide); text-align:center; line-height:1.3; }
.footer-main{ max-width:var(--container-wide); margin:0 auto; padding:var(--space-8) var(--space-6); display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--space-7); }
.footer-main img.wordmark{ height:32px; filter:brightness(0) invert(1); margin-bottom:var(--space-4); }
.footer-main p{ color:var(--text-on-dark-muted); font-size:var(--text-sm); max-width:34ch; line-height:1.6; }
.footer-col h4{ font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--teal-300); margin:0 0 var(--space-4); }
.footer-col a{ display:block; color:var(--text-on-dark-muted); font-size:var(--text-sm); text-decoration:none; margin-bottom:var(--space-3); }
.footer-col a:hover{ color:#fff; }
.footer-social{ display:flex; align-items:center; gap:var(--space-4); margin-top:0; font-size:20px; color:var(--teal-300); }
.footer-social a{ color:inherit; display:inline; margin-bottom:0; }
.page-header-social{ display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-5); font-size:22px; color:var(--teal-300); }
.page-header-social a{ color:inherit; display:inline; margin-bottom:0; }
.page-header-social a:hover{ color:#fff; }
.section-social{ display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-4); font-size:20px; color:var(--teal-600); }
.section-social a{ color:inherit; display:inline; margin-bottom:0; }
.section-social a:hover{ color:var(--teal-800); }
.social-contact{ font-family:var(--font-mono); font-size:var(--text-xs) !important; letter-spacing:var(--ls-label); text-transform:uppercase; text-decoration:none; }
.footer-colophon{ border-top:1px solid rgba(255,255,255,0.08); }
.footer-colophon__inner{ max-width:var(--container-wide); margin:0 auto; padding:var(--space-4) var(--space-6); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-on-dark-muted); letter-spacing:.04em; }
@media (max-width:860px){ .footer-main{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-main{ grid-template-columns:1fr; } }