/* 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.

   Wordmark-only: Fraunces (a fluid display serif — calm cut: opsz 60, wght 600,
   soft/wonk off) styles just the word "Ocean" in the logotype — subset via
   &text=Ocean to ship only the 5 glyphs (~2KB). A deliberate, scoped exception
   to the one-display-voice rule. (Fraunces is also a full document family,
   handy for brand-consistent proposals.) */

@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');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@60,600,0,0&text=Ocean&display=swap');

/* ============================================================================
   OCEAN METRICS · COLOR TOKENS  (light + dark, one source of truth)
   A sunlit, welcoming ocean palette: living-reef TEAL leads the cool, a warm
   YELLOW sun is the single warm accent — balanced, light, and warm. Crisp ink,
   generous space. Theme-aware values use CSS light-dark(); the active theme is
   set by `color-scheme`, switched via :root[data-theme]. Legacy primitive names
   (cobalt/coral/abyss/foam…) are kept as aliases so existing components resolve.
   ========================================================================== */

:root { color-scheme: light dark; }              /* follow the OS by default   */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

:root {
  /* ---- Teal: the lead cool (fixed hues; higher number = deeper) --------- */
  --teal-800: #063d49;
  --teal-700: #0a5c6e;   /* deep teal — strong / hover                       */
  --teal-600: #0c7288;   /* brand — button fill + links (white text 5.6:1)   */
  --teal-500: #1aa0bd;   /* accent surfaces, edges, stats                    */
  --teal-400: #43b9d2;   /* bright accent (accent text on dark)              */
  --teal-300: #86d6e5;   /* light sky-teal — on-dark accents, hover edges     */
  --teal-200: #bfeaf2;
  --teal-100: #e4f6fa;

  /* ---- Deep teal-navy: anchors + dark-mode surfaces -------------------- */
  --navy-900: #04141a;   /* darkest anchor                                  */
  --navy-800: #0a2831;   /* dark-mode page ground                           */
  --navy-700: #0c4553;   /* soft deep-teal — light-mode inverse (footer/CTA)*/
  --navy-600: #14657a;
  --navy-500: #1a89a3;

  /* ---- Sun: the warm yellow accent (fixed; reads on light + dark) ------- */
  --sun-600: #e0951a;    /* deeper gold — warm hover / text spark on light   */
  --sun-500: #f5b528;    /* the warm accent — waterline, highlights, warm CTA*/
  --sun-400: #ffce4d;    /* bright sunlight                                  */
  --sun-300: #ffe3a3;

  /* ---- Ink: teal-slate text (fixed light-mode hues) ------------------- */
  --ink-900: #082129;
  --ink-700: #123a45;
  --ink-500: #3c5b64;
  --ink-400: #547079;
  --ink-300: #5c7880;

  /* ---- Surfaces & lines (THEME-AWARE) ---------------------------------- */
  --foam-50:  light-dark(#f4fafb, #0a2831);   /* page ground                 */
  --foam-100: light-dark(#e6f5f8, #12414d);   /* tinted surface / hover      */
  --line-300: light-dark(#c2e0e7, #2c5764);   /* strong borders              */
  --line-200: light-dark(#d6ebef, #234853);   /* default borders             */
  --line-100: light-dark(#e7f4f6, #173540);   /* hairlines / dividers        */
  --white:    #ffffff;
  --aqua-200: #bfeaf2;
  --aqua-100: #e4f6fa;

  /* ============ LEGACY PRIMITIVE ALIASES (kept for components) =========== */
  --abyss-900: var(--navy-900);
  --abyss-800: var(--navy-800);
  --cobalt-600: var(--teal-700);
  --cobalt-500: var(--teal-600);
  --cobalt-400: var(--teal-500);
  --cobalt-300: var(--teal-300);
  --coral-600: var(--sun-600);
  --coral-500: var(--sun-500);
  --coral-300: var(--sun-300);

  /* ---- Facet colors (unused on this brochure; satisfy tag CSS) --------- */
  --facet-place:   var(--teal-700);
  --facet-method:  var(--navy-500);
  --facet-org:     #1a7a4e;
  --facet-type:    var(--sun-600);
  --facet-topic:   var(--ink-500);
  --facet-portal:  #6d4aa7;
  --facet-content: #a83b6f;
  --facet-year:    var(--ink-500);
  --facet-region:  var(--facet-place);
  --facet-tool:    var(--facet-type);
  --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: #e0951a;
  --err:  #c23b34;
  --info: var(--teal-600);

  /* ============ SEMANTIC ALIASES — prefer these in components ============ */
  --bg-page:        var(--foam-50);
  --bg-surface:     light-dark(#ffffff, #103a45);
  --bg-tint:        var(--foam-100);
  --bg-inverse:     light-dark(#0c4553, #07222a);   /* CTA / footer anchor    */
  --bg-abyss:       light-dark(#0a3a47, #04141a);

  --text-strong:    light-dark(#082129, #f1f9fb);
  --text-heading:   light-dark(#123a45, #e6f4f7);
  --text-body:      light-dark(#3c5b64, #b7d0d6);
  --text-muted:     light-dark(#5c7880, #83a0a7);
  --text-on-dark:   #eaf7fa;
  --text-on-dark-muted: #a2c6cf;

  --brand:          var(--teal-600);                     /* button fill        */
  --brand-text:     light-dark(#0c7288, #86d6e5);        /* brand as text      */
  --brand-hover:    light-dark(#0a5c6e, #43b9d2);
  --accent:         light-dark(#1aa0bd, #43b9d2);        /* surfaces / edges   */
  --accent-hover:   light-dark(#0c7288, #86d6e5);        /* accent as text     */
  --action:         var(--sun-500);                      /* warm accent        */
  --action-ink:     var(--ink-900);                      /* text on a yellow fill */
  --action-hover:   var(--sun-600);
  --link:           light-dark(#0c7288, #86d6e5);

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

  --focus-ring:     var(--teal-500);
}

/* Fallback: browsers without light-dark() get the light palette (static). */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --foam-50: #f4fafb;  --foam-100: #e6f5f8;
    --line-300: #c2e0e7; --line-200: #d6ebef; --line-100: #e7f4f6;
    --bg-surface: #ffffff; --bg-inverse: #0c4553; --bg-abyss: #0a3a47;
    --text-strong: #082129; --text-heading: #123a45; --text-body: #3c5b64; --text-muted: #5c7880;
    --brand-text: #0c7288; --brand-hover: #0a5c6e; --accent: #1aa0bd; --accent-hover: #0c7288;
    --link: #0c7288;
  }
}

/* ============================================================================
   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:    clamp(var(--space-7), 8vw, var(--space-9));  /* airier vertical rhythm */

  /* ---- 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 — soft, cool, airy; like light through shallow water ----- */
  --shadow-xs: 0 1px 2px rgba(16, 58, 92, 0.05);
  --shadow-sm: 0 2px 8px rgba(16, 58, 92, 0.06);
  --shadow-md: 0 8px 22px rgba(16, 58, 92, 0.08);
  --shadow-lg: 0 16px 42px rgba(16, 58, 92, 0.12);
  --shadow-xl: 0 30px 70px rgba(12, 46, 74, 0.18);
  /* warm + cool glows for interactive emphasis */
  --shadow-teal: 0 10px 28px rgba(43, 147, 222, 0.22);
  --shadow-sun:  0 10px 28px rgba(242, 178, 48, 0.30);
  --shadow-focus: 0 0 0 3px rgba(43, 147, 222, 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); --_fg:var(--action-ink); }  /* warm yellow → dark ink for contrast */
.btn--outline{ --_bg:transparent; --_fg:var(--brand-text); --_bd:var(--border-strong); }
.btn--outline:hover{ filter:none; background:var(--foam-100); border-color:var(--brand-text); }
.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(--brand-text); 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(--bg-surface); 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:light-dark(rgba(255,255,255,0.82), rgba(10,40,49,0.80)); 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-text); 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:var(--bg-surface); 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 (home) — light/dark, built around the animated ensō --------- */
.hero{ position:relative; overflow:hidden;
  background:
    radial-gradient(78% 68% at 82% 16%, rgba(245,181,40,0.16), transparent 62%),
    linear-gradient(165deg, var(--foam-100) 0%, var(--bg-page) 58%); }
.hero__inner{ position:relative; max-width:var(--container-wide); margin:0 auto; width:100%;
  padding:clamp(var(--space-7), 7vw, var(--space-10)) var(--space-6);
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(var(--space-6), 5vw, var(--space-9)); align-items:center; }
.hero__copy{ min-width:0; }
.hero h1{ font:var(--type-hero); font-size:clamp(2.4rem,4.8vw,4.25rem); color:var(--text-strong);
  margin:var(--space-4) 0 var(--space-5); letter-spacing:var(--ls-tight); text-wrap:balance; max-width:16ch; }
.hero__lead{ font:var(--type-lead); color:var(--text-body); max-width:52ch; margin-bottom:var(--space-6); }
.hero__actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.hero__mark{ justify-self:center; width:100%; max-width:min(440px, 80%); aspect-ratio:1; }
.hero__mark svg{ width:100%; height:100%; display:block; overflow:visible; }
@media (max-width:860px){
  .hero__inner{ grid-template-columns:1fr; gap:var(--space-5); text-align:center; }
  .hero__copy{ order:2; }
  .hero__mark{ order:1; max-width:min(300px, 70%); }
  .hero h1{ max-width:none; }
  .hero__actions{ justify-content:center; }
  .hero__lead{ margin-inline:auto; }
}

/* homepage stats — a light, airy tinted band (not a second dark slab) */
.stats-band{ background:var(--bg-tint); border-block:1px solid var(--border); padding:var(--space-7) 0; }
.stat-strip{ display:flex; flex-wrap:wrap; gap:var(--space-8); }
.stat-strip--center{ justify-content:center; text-align:center; }
.stat-strip--center .stat{ align-items:center; }
@media (max-width:600px){
  .stat-strip{ gap:var(--space-5) 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; } }

/* ============================================================================
   OCEAN METRICS · SITE-SPECIFIC COMPONENTS
   Additions on top of the shared design system (components.css / layout.css):
   project portfolio cards, the services strip, the about/bio block, and the
   client-logo strip on light. Everything else reuses the base system.
   ========================================================================== */

/* ---- Wordmark: the ensō mark + text logotype -------------------------- */
.om-wordmark{
  display:inline-flex; align-items:center; gap:.5ch;
  font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:var(--text-lg); letter-spacing:var(--ls-tight); line-height:1;
  color:var(--text-heading); text-decoration:none;
}
.om-mark{ width:1.6em; height:1.6em; flex:none; display:block; color:var(--brand-text);
  transition:transform var(--dur-base) var(--ease-out); }
.site-header__logo:hover .om-mark{ transform:rotate(-8deg); }
/* logotype: fluid serif "Ocean" (water) + monospace "Metrics" (measurement) —
   a deliberate, scoped exception to the one-display-voice rule */
.om-wordmark__ocean{ font-family:'Fraunces', Georgia, var(--font-display); font-weight:600;
  letter-spacing:-0.005em; color:var(--brand-text); }
.om-wordmark__metrics{ font-family:var(--font-mono); font-weight:500;
  font-size:.9em; letter-spacing:0.005em; color:var(--text-heading); }
.site-header__logo:hover .om-wordmark{ text-decoration:none; }
.site-nav__icon{ font-size:1.15rem; color:var(--text-heading) !important; display:inline-flex; align-items:center; }
.site-nav__icon:hover{ color:var(--brand-text) !important; background:transparent !important; }
.site-footer .om-wordmark__metrics{ color:#fff; }
.site-footer .om-wordmark__ocean{ color:var(--teal-300); }
.site-footer .om-mark{ color:var(--teal-300); }

/* ---- Theme toggle (light / dark) -------------------------------------- */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.15rem; height:2.15rem; flex:none;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:transparent; color:var(--text-heading); cursor:pointer; font-size:1rem;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover{ background:var(--foam-100); color:var(--brand-text); border-color:var(--border-strong); }
.theme-toggle:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }

/* ---- Project portfolio grid ------------------------------------------- */
/* auto-fit so 3 current projects fill one clean row (no orphan cell) and reflow below */
.projects-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--space-6); }

/* client / funder badge sitting on a project card's media */
.card__client{
  position:absolute; top:var(--space-3); left:var(--space-3);
  display:inline-flex; align-items:center; gap:.45em;
  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(4,19,31,.62); backdrop-filter:blur(4px);
  padding:.35em .7em; border-radius:var(--radius-xs);
}
.card__status{ margin-left:auto; }

/* tech-stack mono row on a card */
.card__stack{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-1); }
.card__chip{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:var(--ls-wide);
  color:var(--text-body); background:var(--foam-100);
  border:1px solid var(--border); border-radius:var(--radius-pill); padding:.28em .7em;
}
/* role + period are real due-diligence signals → body ink, not decorative muted */
.card__meta-row{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-body); letter-spacing:var(--ls-wide); }

/* ---- Services — a line-icon beside each verb, description below --------- */
.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(var(--space-5), 4vw, var(--space-7)); }
@media (max-width:860px){ .services{ grid-template-columns:1fr; } }
.service{ display:flex; flex-direction:column; gap:var(--space-3); }
.service h3{ display:flex; align-items:center; gap:var(--space-3); margin:0;
  font:var(--type-h3); font-size:var(--text-xl); color:var(--text-heading); }
.service__icon{ display:inline-flex; align-items:center; justify-content:center; width:2.3rem; height:2.3rem; flex:none;
  border:1px solid var(--border-strong); border-radius:var(--radius-md); color:var(--accent); }
.service__icon svg{ width:1.2rem; height:1.2rem; }
.service p{ margin:0; font:var(--type-small); color:var(--text-body); max-width:38ch; }

/* ---- About / bio block ------------------------------------------------ */
.bio{ display:grid; grid-template-columns:220px 1fr; gap:var(--space-8); align-items:start; }
@media (max-width:720px){ .bio{ grid-template-columns:1fr; gap:var(--space-5); } }
.bio__portrait{ width:100%; border-radius:var(--radius-lg); border:1px solid var(--border);
  box-shadow:var(--shadow-md); aspect-ratio:1/1; object-fit:cover; }
.bio__name{ font:var(--type-h2); margin:0; }
.bio__role{ font-family:var(--font-mono); font-size:var(--text-sm); letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:var(--accent-hover); margin:var(--space-2) 0 var(--space-5); }
.bio__links{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-4); }

/* ---- Client-logo strip — promoted proof, theme-aware ------------------ */
.client-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(var(--space-6), 5vw, var(--space-8)); margin-top:var(--space-6); }
.client-strip img{ height:42px; width:auto; object-fit:contain;
  transition:filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.client-strip img:hover{ transform:translateY(-2px); }

/* full-color/detailed logos (BOEM, NOAA): desaturated at rest, true color on hover.
   On dark, invert the grayscale so the dark seals stay legible (detail preserved). */
.client-logo--color{ filter:grayscale(1); opacity:.78; }
.client-logo--color:hover{ filter:grayscale(0); opacity:1; }
:root[data-theme="dark"] .client-logo--color{ filter:grayscale(1) invert(1); opacity:.85; }
:root[data-theme="dark"] .client-logo--color:hover{ filter:none; opacity:1; }

/* white-silhouette logos (NASA, NREL, NCEAS): ink on light, white on dark. */
.client-logo--mono{ filter:brightness(0); opacity:.66; }
.client-logo--mono:hover{ opacity:.92; }
:root[data-theme="dark"] .client-logo--mono{ filter:brightness(0) invert(1); opacity:.82; }
:root[data-theme="dark"] .client-logo--mono:hover{ opacity:1; }

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .client-logo--color{ filter:grayscale(1) invert(1); opacity:.85; }
  :root:not([data-theme="light"]) .client-logo--color:hover{ filter:none; opacity:1; }
  :root:not([data-theme="light"]) .client-logo--mono{ filter:brightness(0) invert(1); opacity:.82; }
  :root:not([data-theme="light"]) .client-logo--mono:hover{ opacity:1; }
}

/* ---- Past-projects compact list --------------------------------------- */
.past-list{ list-style:none; margin:var(--space-6) 0 0; padding:0; display:flex; flex-direction:column; }
.past-row{ display:grid; grid-template-columns:1fr auto; gap:var(--space-3) var(--space-5);
  align-items:baseline; padding:var(--space-4) 0; border-bottom:1px solid var(--border); }
.past-row:last-child{ border-bottom:none; }
.past-row__title{ font:var(--type-card); font-size:var(--text-lg); color:var(--text-heading); }
.past-row__client{ font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing:var(--ls-wide); color:var(--accent-hover); white-space:nowrap; }
.past-row__desc{ grid-column:1 / -1; font-size:var(--text-sm); color:var(--text-body); margin:var(--space-1) 0 0; max-width:70ch; }

/* ---- CTA band — light + warm; a sunlit invitation, footer stays the anchor */
.cta-band{ position:relative; border-top:1px solid var(--border);
  background:
    radial-gradient(65% 130% at 50% 0%, rgba(245,181,40,0.14), transparent 62%),
    var(--bg-tint); color:var(--text-body); }
.cta-band__inner{ max-width:var(--container); margin:0 auto; padding:var(--space-9) var(--space-6);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-4); }
.cta-band h2{ color:var(--text-strong); margin:0; }
.cta-band p{ color:var(--text-body); max-width:52ch; margin:0; }