/* ==========================================================================
   WILD CHORUS — design system stylesheet
   v1.0 · October 2026

   A wildlife-monitoring interface for the Savanna Institute partner
   network. Visual language follows savannainstitute.org (Archivo, sage,
   terracotta, cream, soft rounded corners); data patterns carry over
   from the Badgerton Wildlife Map (species cards, monthly histogram,
   detection clips, confidence pills).

   Contents
     1. Fonts
     2. Tokens (color, type, space, shape, motion)
     3. Dark theme
     4. Base & typography
     5. Layout
     6. Buttons & links
     7. Site chrome: announcement bar, header, nav, footer, back-to-top
     8. Content patterns: hero, feature panel, accordion, program grid,
        post cards
     9. Wild Chorus data components: eyebrow, stat, pills, species card,
        thumbs, days bar, month histogram, clip list, play button,
        station panel, tabs, gallery, lightbox
    10. Forms
    11. Utilities & accessibility

   Naming: every class is prefixed `wc-`; every token `--wc-`.
   ========================================================================== */


/* 1. FONTS ----------------------------------------------------------------- */
/* Archivo        — all UI, body and headings (Savanna Institute's face)
   Archivo Narrow — condensed display: big numbers, wordmark-style titles
   Cormorant Garamond italic — scientific (Latin) names only
   DM Mono        — data: counts, timestamps, filenames, eyebrow labels   */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Archivo+Narrow:wght@600;700&family=Cormorant+Garamond:ital,wght@1,500&family=DM+Mono:wght@400;500&display=swap");


/* 2. TOKENS ---------------------------------------------------------------- */
:root {
  /* — Core palette (sampled from savannainstitute.org) — */
  --wc-sage:          #507765;  /* primary: buttons, panels, accent headings */
  --wc-sage-light:    #6e9382;  /* secondary green, hover on sage */
  --wc-sage-deep:     #3e5e50;  /* pressed state, text on pale sage */
  --wc-sage-mist:     #e7ece2;  /* expanded card wash */
  --wc-leaf:          #5b8c51;  /* bright leaf: back-to-top, success */
  --wc-terracotta:    #e6976b;  /* CTAs, links, program labels */
  --wc-terracotta-dk: #c97a50;  /* CTA hover */
  --wc-mauve:         #996967;  /* link hover */
  --wc-bark:          #6f6663;  /* footer / soil band */
  --wc-bark-deep:     #5a524f;
  --wc-cream:         #f1ece5;  /* section wash ("Our Programs") */
  --wc-linen:         #f8f5f0;  /* softer wash */
  --wc-sun:           #ffc400;  /* rare highlight only */
  --wc-white:         #ffffff;

  /* — Ink — */
  --wc-ink:           #1e1e1e;  /* body text */
  --wc-ink-heading:   #363636;  /* headings */
  --wc-ink-muted:     #69727d;  /* secondary text */
  --wc-ink-faint:     #8e9389;  /* filenames, captions */
  --wc-ink-on-dark:   #ffffff;
  --wc-ink-on-bark:   #e9e4df;

  /* — Lines — */
  --wc-line:          #dddddd;
  --wc-line-soft:     #eaeaea;
  --wc-line-sage:     #c9d3c4;

  /* — Semantic roles (components use these, not raw colors) — */
  --wc-bg:            var(--wc-white);
  --wc-bg-alt:        var(--wc-cream);
  --wc-surface:       var(--wc-white);
  --wc-surface-raised:var(--wc-white);
  --wc-surface-tint:  var(--wc-sage-mist);
  --wc-text:          var(--wc-ink);
  --wc-text-heading:  var(--wc-ink-heading);
  --wc-text-muted:    var(--wc-ink-muted);
  --wc-text-faint:    var(--wc-ink-faint);
  --wc-accent:        var(--wc-sage);
  --wc-accent-hover:  var(--wc-sage-light);
  --wc-cta:           var(--wc-terracotta);
  --wc-cta-hover:     var(--wc-terracotta-dk);
  --wc-link:          var(--wc-terracotta);
  --wc-link-hover:    var(--wc-mauve);
  --wc-border:        var(--wc-line);
  --wc-border-soft:   var(--wc-line-soft);
  --wc-focus:         #2f6fd1;
  --wc-bar:           var(--wc-sage);       /* data bars */
  --wc-bar-soft:      #b5c4ae;              /* histogram bars */
  --wc-bar-empty:     #ede6d6;              /* empty-month tick */
  --wc-chip-bg:       var(--wc-cream);      /* round icon buttons, tab track */
  --wc-chip-hover:    #e6dfd4;
  --wc-ring:          var(--wc-sage-deep);  /* play-button outline */
  --wc-danger:        #b4532a;
  --wc-alert-bg:      #fbeee4;
  --wc-alert-ink:     #7a3d1e;

  /* — Type families — */
  --wc-font-sans:     "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wc-font-display:  "Archivo Narrow", "Archivo", system-ui, sans-serif;
  --wc-font-latin:    "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --wc-font-mono:     "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* — Type scale (desktop values from the source site) — */
  --wc-text-xs:   0.8125rem;  /* 13 */
  --wc-text-sm:   0.9375rem;  /* 15 */
  --wc-text-base: 1.125rem;   /* 18 — UI body */
  --wc-text-lg:   1.25rem;    /* 20 — long-form body, matches source */
  --wc-text-xl:   1.375rem;   /* 22 — card titles */
  --wc-h4:        1.5rem;     /* 24 */
  --wc-h3:        2.25rem;    /* 36 */
  --wc-h2:        2.625rem;   /* 42 */
  --wc-h1:        3rem;       /* 48 */
  --wc-display:   clamp(2.5rem, 5vw + 1rem, 4rem);

  --wc-leading-body:  1.8;    /* 20/36 on source */
  --wc-leading-ui:    1.5;
  --wc-leading-tight: 1.15;
  --wc-tracking-head: 0.0125em;
  --wc-tracking-ui:   -0.02em;  /* nav & buttons */
  --wc-tracking-caps: 0.02em;
  --wc-tracking-mono: 0.12em;   /* eyebrow labels */

  /* — Space (4px base) — */
  --wc-space-1: 4px;   --wc-space-2: 8px;   --wc-space-3: 12px;
  --wc-space-4: 16px;  --wc-space-5: 20px;  --wc-space-6: 24px;
  --wc-space-7: 32px;  --wc-space-8: 40px;  --wc-space-9: 48px;
  --wc-space-10: 64px; --wc-space-11: 80px; --wc-space-12: 112px;

  /* — Shape — */
  --wc-radius-sm:   6px;
  --wc-radius-btn:  10px;    /* source buttons */
  --wc-radius-card: 20px;    /* source images & cards */
  --wc-radius-panel:24px;
  --wc-radius-pill: 999px;

  --wc-shadow-card:  0 2px 14px rgba(30, 30, 30, 0.08);
  --wc-shadow-raise: 0 8px 28px rgba(30, 30, 30, 0.12);
  --wc-shadow-header:0 2px 8px rgba(0, 0, 0, 0.06);

  /* — Layout — */
  --wc-max:        1176px;   /* source content width */
  --wc-max-narrow: 760px;
  --wc-gutter:     clamp(16px, 4vw, 42px);
  --wc-header-h:   92px;

  /* — Motion — */
  --wc-ease:    cubic-bezier(.2, .7, .2, 1);
  --wc-fast:    150ms;
  --wc-med:     260ms;
}


/* 3. DARK THEME ------------------------------------------------------------ */
/* Optional. The source site is light-only; this keeps Wild Chorus readable
   for viewers who prefer dark. Force a theme with data-theme on <html>. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wc-bg: #1b1f1c; --wc-bg-alt: #232823; --wc-surface: #232823;
    --wc-surface-raised: #2a302a; --wc-surface-tint: #26302a;
    --wc-text: #ecebe6; --wc-text-heading: #f4f2ed;
    --wc-text-muted: #a9b0a7; --wc-text-faint: #8a9188;
    --wc-accent: #7fa592; --wc-accent-hover: #93b6a4;
    --wc-link: #eea782; --wc-link-hover: #f3c0a4;
    --wc-border: #3a413a; --wc-border-soft: #303630; --wc-line-sage: #3d4a40;
    --wc-bar: #7fa592; --wc-bar-soft: #56705f; --wc-bar-empty: #353b34;
    --wc-shadow-card: 0 2px 14px rgba(0,0,0,.35);
    --wc-chip-bg: #2f362f; --wc-chip-hover: #3a423a; --wc-ring: #93b6a4;
    --wc-danger: #f0a07a; --wc-alert-bg: #3a2a22; --wc-alert-ink: #f6cdb5;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --wc-bg: #1b1f1c; --wc-bg-alt: #232823; --wc-surface: #232823;
  --wc-surface-raised: #2a302a; --wc-surface-tint: #26302a;
  --wc-text: #ecebe6; --wc-text-heading: #f4f2ed;
  --wc-text-muted: #a9b0a7; --wc-text-faint: #8a9188;
  --wc-accent: #7fa592; --wc-accent-hover: #93b6a4;
  --wc-link: #eea782; --wc-link-hover: #f3c0a4;
  --wc-border: #3a413a; --wc-border-soft: #303630; --wc-line-sage: #3d4a40;
  --wc-bar: #7fa592; --wc-bar-soft: #56705f; --wc-bar-empty: #353b34;
  --wc-shadow-card: 0 2px 14px rgba(0,0,0,.35);
  --wc-chip-bg: #2f362f; --wc-chip-hover: #3a423a; --wc-ring: #93b6a4;
  --wc-danger: #f0a07a; --wc-alert-bg: #3a2a22; --wc-alert-ink: #f6cdb5;
  color-scheme: dark;
}


/* 4. BASE & TYPOGRAPHY ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--wc-bg);
  color: var(--wc-text);
  font-family: var(--wc-font-sans);
  font-size: var(--wc-text-base);
  line-height: var(--wc-leading-ui);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6, .wc-h1, .wc-h2, .wc-h3, .wc-h4 {
  margin: 0 0 var(--wc-space-4);
  color: var(--wc-text-heading);
  font-family: var(--wc-font-sans);
  font-weight: 700;
  line-height: var(--wc-leading-tight);
  letter-spacing: var(--wc-tracking-head);
  text-wrap: balance;
}
h1, .wc-h1 { font-size: var(--wc-h1); }
h2, .wc-h2 { font-size: var(--wc-h2); }
h3, .wc-h3 { font-size: var(--wc-h3); }
h4, .wc-h4 { font-size: var(--wc-h4); }
h5 { font-size: var(--wc-text-lg); }
h6 { font-size: var(--wc-text-base); }

.wc-display {
  font-size: var(--wc-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
}
.wc-heading--accent { color: var(--wc-accent); }
.wc-heading--light  { font-weight: 400; }   /* "Do you have a question?" */

p { margin: 0 0 var(--wc-space-5); }

.wc-prose { font-size: var(--wc-text-lg); line-height: var(--wc-leading-body); }
.wc-prose > * { max-width: 68ch; }

.wc-lead { font-size: var(--wc-text-lg); line-height: var(--wc-leading-body); color: var(--wc-text); }
.wc-muted { color: var(--wc-text-muted); }
.wc-small { font-size: var(--wc-text-sm); }

/* Scientific names: always italic serif, never bold */
.wc-latin {
  font-family: var(--wc-font-latin);
  font-style: italic;
  font-weight: 500;
  color: var(--wc-text-muted);
  letter-spacing: 0;
}

/* Data text */
.wc-mono, code, kbd, samp {
  font-family: var(--wc-font-mono);
  font-size: 0.875em;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

::selection { background: color-mix(in srgb, var(--wc-terracotta) 35%, transparent); }


/* 5. LAYOUT ---------------------------------------------------------------- */
.wc-container {
  width: 100%;
  max-width: calc(var(--wc-max) + var(--wc-gutter) * 2);
  margin-inline: auto;
  padding-left: max(var(--wc-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--wc-gutter), env(safe-area-inset-right, 0px));
}
.wc-container--narrow { max-width: calc(var(--wc-max-narrow) + var(--wc-gutter) * 2); }

.wc-section       { padding-block: var(--wc-space-11); }
.wc-section--tight{ padding-block: var(--wc-space-9); }
.wc-section--cream{ background: var(--wc-bg-alt); --wc-keyline: var(--wc-bg-alt); }
.wc-section--sage { background: var(--wc-accent); color: var(--wc-ink-on-dark); }
.wc-section--sage :is(h1,h2,h3,h4) { color: var(--wc-ink-on-dark); }

.wc-section__title { text-align: center; margin-bottom: var(--wc-space-9); }

.wc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wc-space-10);
  align-items: center;
}
.wc-grid { display: grid; gap: var(--wc-space-7); }
.wc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wc-stack > * + * { margin-top: var(--wc-space-4); }
.wc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wc-space-3); }

@media (max-width: 900px) {
  .wc-split, .wc-grid--3, .wc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-split { grid-template-columns: 1fr; gap: var(--wc-space-8); }
}
@media (max-width: 600px) {
  :root { --wc-h1: 2.25rem; --wc-h2: 2rem; --wc-h3: 1.75rem; --wc-h4: 1.3rem; --wc-text-lg: 1.125rem; }
  .wc-grid--2, .wc-grid--3, .wc-grid--4 { grid-template-columns: 1fr; }
  .wc-section { padding-block: var(--wc-space-10); }
}


/* 6. BUTTONS & LINKS ------------------------------------------------------- */
a { color: var(--wc-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--wc-link-hover); }

.wc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wc-space-2);
  padding: 12px 25px 10px;          /* source: optical baseline nudge */
  border: 0;
  border-radius: var(--wc-radius-btn);
  background: var(--wc-cta);
  color: var(--wc-white);
  font-family: var(--wc-font-sans);
  font-size: 1.0625rem;              /* 17 */
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--wc-tracking-ui);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--wc-fast) var(--wc-ease), transform var(--wc-fast) var(--wc-ease);
}
.wc-btn:hover  { background: var(--wc-cta-hover); color: var(--wc-white); }
.wc-btn:active { transform: translateY(1px); }

.wc-btn--sage        { background: var(--wc-sage); }
.wc-btn--sage:hover  { background: var(--wc-sage-light); }
.wc-btn--ghost {
  background: transparent;
  color: var(--wc-accent);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.wc-btn--ghost:hover { background: var(--wc-surface-tint); color: var(--wc-accent); }
.wc-btn--sm { padding: 8px 16px 7px; font-size: var(--wc-text-sm); }

/* Text-only CTA, as on post cards ("READ MORE") */
.wc-link-cta {
  color: var(--wc-link);
  font-weight: 700;
  font-size: var(--wc-text-lg);
  text-transform: uppercase;
  letter-spacing: var(--wc-tracking-caps);
  text-decoration: none;
}
.wc-link-cta:hover { color: var(--wc-link-hover); }

/* Round icon button (expand/collapse, close) */
.wc-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--wc-chip-bg);
  color: var(--wc-text-heading);
  cursor: pointer;
  transition: background var(--wc-fast) var(--wc-ease), transform var(--wc-med) var(--wc-ease);
}
.wc-icon-btn svg { width: 20px; height: 20px; }
.wc-icon-btn:hover { background: var(--wc-chip-hover); }
.wc-icon-btn--active,
[aria-expanded="true"] > .wc-icon-btn,
.wc-icon-btn[aria-expanded="true"] { background: var(--wc-sage); color: var(--wc-white); }


/* 7. SITE CHROME ----------------------------------------------------------- */
/* Announcement bar (terracotta strip above header) */
.wc-topbar {
  background: var(--wc-terracotta);
  color: var(--wc-white);
  font-size: var(--wc-text-sm);
  font-weight: 600;
  letter-spacing: var(--wc-tracking-ui);
}
.wc-topbar__inner {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 48px; gap: var(--wc-space-4);
}
.wc-topbar a { color: inherit; text-decoration: none; }
.wc-topbar a:hover { text-decoration: underline; }

/* Header */
.wc-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--wc-surface) 94%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: var(--wc-shadow-header);
}
.wc-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--wc-header-h); gap: var(--wc-space-6);
}

/* Wordmark: condensed caps in sage, beside a round emblem */
.wc-brand {
  display: inline-flex; align-items: center; gap: var(--wc-space-3);
  color: var(--wc-accent); text-decoration: none;
}
.wc-brand__mark { width: 48px; height: 48px; flex: none; }
.wc-brand__name {
  font-family: var(--wc-font-display);
  font-size: 1.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.01em; line-height: 1;
}

.wc-nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 54px); }
.wc-nav a {
  color: var(--wc-accent);
  font-size: 1.0625rem; font-weight: 600;
  letter-spacing: var(--wc-tracking-ui);
  text-transform: uppercase; text-decoration: none;
  padding-block: var(--wc-space-2);
  border-bottom: 2px solid transparent;
}
.wc-nav a:hover, .wc-nav a[aria-current="page"] { color: var(--wc-sage-deep); border-bottom-color: var(--wc-terracotta); }
@media (max-width: 900px) { .wc-nav { display: none; } }

/* Footer — warm bark field, white type, terracotta CTAs */
.wc-footer {
  background: var(--wc-bark);
  color: var(--wc-ink-on-bark);
  padding-block: var(--wc-space-11) var(--wc-space-9);
  font-size: var(--wc-text-lg);
  line-height: 1.6;
}
.wc-footer :is(h2,h3,h4) { color: var(--wc-white); font-size: var(--wc-h4); }
.wc-footer a { color: var(--wc-white); text-decoration: none; }
.wc-footer a:hover { color: var(--wc-cream); text-decoration: underline; }
.wc-footer__grid { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr; gap: var(--wc-space-10); }
.wc-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wc-space-3); }
.wc-footer__links a { font-weight: 700; text-transform: uppercase; letter-spacing: var(--wc-tracking-caps); }
.wc-footer__legal { margin-top: var(--wc-space-9); padding-top: var(--wc-space-6); border-top: 1px solid rgba(255,255,255,.18); font-size: var(--wc-text-sm); color: #cfc8c3; }
@media (max-width: 900px) { .wc-footer__grid { grid-template-columns: 1fr; } }

/* Hand-drawn landscape band that sits on top of the footer.
   Supply your own artwork (no AI images) as a transparent PNG/SVG. */
.wc-soil-band {
  height: clamp(120px, 16vw, 220px);
  background: var(--wc-band-image, none) center bottom / cover no-repeat, linear-gradient(to bottom, var(--wc-bg) 45%, var(--wc-bark) 45%);
}

/* Back-to-top: square leaf-green tile, fixed bottom-right */
.wc-to-top {
  position: fixed; z-index: 40;
  right: calc(28px + env(safe-area-inset-right, 0px));
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center;
  width: 60px; height: 60px;
  background: var(--wc-leaf); color: var(--wc-white);
  border: 0; border-radius: 2px; cursor: pointer;
  text-decoration: none;
  transition: background var(--wc-fast) var(--wc-ease);
}
.wc-to-top:hover { background: #4d7a44; color: var(--wc-white); }


/* 8. CONTENT PATTERNS ------------------------------------------------------ */
/* Hero: full-bleed photo, centered white headline, terracotta CTA */
.wc-hero {
  position: relative;
  display: grid; place-items: center;
  min-height: clamp(420px, 62vh, 720px);
  padding: var(--wc-space-11) var(--wc-gutter);
  background: var(--wc-sage-deep) var(--wc-hero-image, none) center / cover no-repeat;
  color: var(--wc-white);
  text-align: center;
  isolation: isolate;
}
.wc-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,28,22,.15), rgba(20,28,22,.45));
}
.wc-hero :is(h1,h2,.wc-display) { color: var(--wc-white); text-shadow: 0 2px 18px rgba(0,0,0,.35); }

/* Callout strip overlapping the bottom of a hero */
.wc-callout {
  position: relative; z-index: 2;
  margin-top: calc(var(--wc-space-11) * -1);
  display: flex; align-items: center; gap: var(--wc-space-8);
  padding: var(--wc-space-8) var(--wc-space-9);
  background: var(--wc-accent); color: var(--wc-white);
  border-radius: var(--wc-radius-card) var(--wc-radius-card) 0 0;
  font-size: var(--wc-h4); font-weight: 700; line-height: 1.3;
}

/* Feature: rounded photo + overlapping sage panel with white keyline */
.wc-feature { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; }
.wc-feature__media {
  grid-column: 1; grid-row: 1;
  border-radius: var(--wc-radius-card); overflow: hidden;
  aspect-ratio: 4 / 3;
}
.wc-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.wc-feature__panel {
  grid-column: 1 / -1; grid-row: 1;
  justify-self: end;
  width: min(100%, 52%);
  padding: var(--wc-space-9) var(--wc-space-10);
  background: var(--wc-accent); color: var(--wc-white);
  border-radius: var(--wc-radius-card);
  box-shadow: 0 0 0 10px var(--wc-keyline, var(--wc-bg));   /* keyline cut into the photo; matches the section background */
  font-size: var(--wc-text-lg); line-height: var(--wc-leading-body);
}
.wc-feature__panel :is(h2,h3) { color: var(--wc-white); }
.wc-feature--reverse .wc-feature__media { grid-column: 2; }
.wc-feature--reverse { grid-template-columns: 1fr 1.15fr; }
.wc-feature--reverse .wc-feature__panel { justify-self: start; }
@media (max-width: 900px) {
  .wc-feature, .wc-feature--reverse { grid-template-columns: 1fr; }
  .wc-feature__media, .wc-feature--reverse .wc-feature__media { grid-column: 1; grid-row: 1; }
  .wc-feature__panel { grid-row: 2; width: auto; margin: -48px var(--wc-space-4) 0; justify-self: stretch; }
}

/* Sage card (e.g. "Ask an Agroforester") */
.wc-panel {
  padding: var(--wc-space-10) var(--wc-space-9);
  background: var(--wc-accent); color: var(--wc-white);
  border-radius: var(--wc-radius-panel);
}
.wc-panel :is(h2,h3,h4) { color: var(--wc-white); }

/* Accordion: white rows on sage, chevron right */
.wc-accordion { display: grid; gap: var(--wc-space-6); }
.wc-accordion details { background: var(--wc-surface); color: var(--wc-text); }
.wc-accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wc-space-5);
  padding: var(--wc-space-7) var(--wc-space-7);
  font-size: var(--wc-h4); font-weight: 700; letter-spacing: -0.03em; line-height: 1.25;
  color: var(--wc-text-heading); cursor: pointer; list-style: none;
}
.wc-accordion summary::-webkit-details-marker { display: none; }
.wc-accordion summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--wc-sage); border-bottom: 2px solid var(--wc-sage);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--wc-med) var(--wc-ease);
}
.wc-accordion details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.wc-accordion__body { padding: 0 var(--wc-space-7) var(--wc-space-7); font-size: var(--wc-text-base); line-height: 1.7; }

/* Program grid: hand-drawn illustration over a terracotta caps label */
.wc-program { display: grid; justify-items: center; gap: var(--wc-space-6); text-align: center; text-decoration: none; }
.wc-program__art { width: 100%; max-width: 280px; aspect-ratio: 1; object-fit: contain; transition: transform var(--wc-med) var(--wc-ease); }
.wc-program:hover .wc-program__art { transform: translateY(-4px) rotate(-1deg); }
.wc-program__label {
  color: var(--wc-terracotta);
  font-size: 1.0625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--wc-tracking-caps);
}

/* Post card (Perennial AF blog cards) */
.wc-post {
  display: flex; flex-direction: column;
  background: var(--wc-surface);
  border-radius: var(--wc-radius-card);
  box-shadow: var(--wc-shadow-card);
  overflow: hidden;
}
.wc-post__media { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.wc-post__body { flex: 1; display: grid; align-content: start; gap: var(--wc-space-7); padding: var(--wc-space-9) var(--wc-space-9) var(--wc-space-8); }
.wc-post__title { margin: 0; font-size: var(--wc-text-xl); line-height: 1.25; }
.wc-post__meta {
  display: flex; align-items: center; gap: var(--wc-space-3);
  padding: var(--wc-space-5) var(--wc-space-9);
  border-top: 1px solid var(--wc-border-soft);
  color: var(--wc-accent); font-weight: 600; font-size: var(--wc-text-base);
}
.wc-post__meta > * + *::before { content: "•"; margin-right: var(--wc-space-3); }


/* 9. WILD CHORUS DATA COMPONENTS ------------------------------------------- */

/* Eyebrow: tracked mono caps ("WHEN IT WAS HEARD · 2026") */
.wc-eyebrow {
  margin: 0 0 var(--wc-space-5);
  font-family: var(--wc-font-mono);
  font-size: var(--wc-text-sm);
  font-weight: 500;
  letter-spacing: var(--wc-tracking-mono);
  text-transform: uppercase;
  color: var(--wc-text-heading);
}
.wc-eyebrow .wc-sep { margin-inline: 0.6em; color: var(--wc-text-faint); }

/* Big stat (station totals, species counts) */
.wc-stat { display: grid; gap: 2px; }
.wc-stat__value { font-family: var(--wc-font-display); font-size: 3rem; font-weight: 700; line-height: 1; color: var(--wc-accent); font-variant-numeric: tabular-nums; }
.wc-stat__label { font-family: var(--wc-font-mono); font-size: var(--wc-text-xs); letter-spacing: var(--wc-tracking-mono); text-transform: uppercase; color: var(--wc-text-muted); }

/* Pills */
.wc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 14px;
  border: 1.5px solid var(--wc-border);
  border-radius: var(--wc-radius-pill);
  background: var(--wc-surface);
  font-family: var(--wc-font-mono);
  font-size: var(--wc-text-sm);
  line-height: 1.6;
  color: var(--wc-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Larger sans pill used on clip rows */
.wc-pill--lg { padding: 6px 18px; font-family: var(--wc-font-sans); font-size: var(--wc-text-xl); font-weight: 500; letter-spacing: -0.01em; }
.wc-pill--sage   { background: var(--wc-sage);  border-color: var(--wc-sage);  color: var(--wc-white); }
.wc-pill--terra  { background: var(--wc-terracotta); border-color: var(--wc-terracotta); color: var(--wc-white); }
.wc-pill--soft   { background: var(--wc-surface-tint); border-color: transparent; color: var(--wc-sage-deep); }
/* Confidence tiers (optional) */
.wc-pill[data-confidence="high"] { border-color: var(--wc-line-sage); }
.wc-pill[data-confidence="mid"]  { border-color: #ecd2b2; }
.wc-pill[data-confidence="low"]  { border-color: #e7b9a6; color: var(--wc-mauve); }

/* Species card ------------------------------------------------------------ */
.wc-species {
  background: var(--wc-surface);
  border: 1.5px solid var(--wc-border);
  border-radius: var(--wc-radius-card);
  overflow: hidden;
  transition: border-color var(--wc-med) var(--wc-ease), background var(--wc-med) var(--wc-ease), box-shadow var(--wc-med) var(--wc-ease);
}
.wc-species:hover { box-shadow: var(--wc-shadow-card); }
.wc-species.is-open,
.wc-species[open] { background: var(--wc-surface-tint); border-color: var(--wc-accent); }

.wc-species__head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--wc-space-7);
  padding: var(--wc-space-6) var(--wc-space-7);
  cursor: pointer;
  list-style: none;
}
.wc-species__head::-webkit-details-marker { display: none; }

.wc-species__name {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--wc-text-heading);
}
.wc-species__name .wc-latin { font-size: 1.05em; margin-left: 0.25em; }

.wc-species__metrics { display: grid; justify-items: end; gap: var(--wc-space-3); }
.wc-species__counts { display: flex; align-items: center; gap: var(--wc-space-4); color: var(--wc-text-muted); }
.wc-species__counts .wc-mono { font-size: var(--wc-text-base); }

/* chevron rotates right → down when open */
.wc-species .wc-icon-btn svg { transition: transform var(--wc-med) var(--wc-ease); }
.wc-species.is-open .wc-icon-btn,
.wc-species[open] .wc-icon-btn { background: var(--wc-sage); color: var(--wc-white); }
.wc-species.is-open .wc-icon-btn svg,
.wc-species[open] .wc-icon-btn svg { transform: rotate(90deg); }

.wc-species__body {
  padding: var(--wc-space-8) var(--wc-space-7) var(--wc-space-7);
  border-top: 1.5px solid var(--wc-line-sage);
  display: grid; gap: var(--wc-space-9);
}

@media (max-width: 760px) {
  .wc-species__head { grid-template-columns: auto 1fr auto; gap: var(--wc-space-4); padding: var(--wc-space-4); }
  .wc-species__metrics { grid-column: 1 / -1; grid-row: 2; justify-items: start; }
  .wc-species__name { font-size: 1.25rem; }
}

/* Paired thumbnails (male / female, adult / juvenile) */
.wc-thumbs {
  display: grid; grid-auto-flow: column; gap: 4px;
  border-radius: var(--wc-radius-card); overflow: hidden;
  width: 220px; aspect-ratio: 2 / 1;
  background: var(--wc-surface);
}
.wc-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.wc-thumbs--single { grid-auto-flow: row; width: 110px; aspect-ratio: 1; }
@media (max-width: 760px) { .wc-thumbs { width: 112px; } .wc-thumbs--single { width: 56px; } }

/* Days-detected bar ("51 days") — set --wc-value from 0 to 1 */
.wc-daybar { display: flex; align-items: center; gap: var(--wc-space-4); }
.wc-daybar__track { width: 200px; height: 14px; border-radius: var(--wc-radius-pill); background: transparent; }
.wc-daybar__fill {
  display: block; height: 100%;
  width: calc(var(--wc-value, 1) * 100%); min-width: 14px;
  border-radius: inherit; background: var(--wc-bar);
}
.wc-daybar__label { font-family: var(--wc-font-mono); font-size: var(--wc-text-base); color: var(--wc-text); white-space: nowrap; }

/* Month histogram ("When it was heard")
   <div class="wc-months"> with 12 <div class="wc-month" style="--wc-value:.6">
   containing <span class="wc-month__bar"></span><span class="wc-month__label">M</span> */
.wc-months {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: var(--wc-space-2);
  max-width: 900px;
  height: 140px;
}
.wc-month { display: grid; grid-template-rows: 1fr auto; justify-items: center; height: 100%; gap: var(--wc-space-3); }
.wc-month__bar {
  align-self: end;
  width: min(12px, 70%);
  height: max(4px, calc(var(--wc-value, 0) * 100%));
  border-radius: var(--wc-radius-pill);
  background: var(--wc-bar-soft);
  transition: height var(--wc-med) var(--wc-ease), background var(--wc-fast);
}
.wc-month--empty .wc-month__bar { background: var(--wc-bar-empty); }
.wc-month__label {
  font-family: var(--wc-font-mono); font-size: var(--wc-text-sm);
  color: var(--wc-text-muted);
}
.wc-month--peak .wc-month__bar { background: var(--wc-bar); }
.wc-month--active .wc-month__label { color: var(--wc-text-heading); font-weight: 500; }
.wc-months__note { margin-top: var(--wc-space-4); font-family: var(--wc-font-mono); font-size: var(--wc-text-sm); color: var(--wc-text-muted); }

/* Play button: outlined circle, sage triangle */
.wc-play {
  display: inline-grid; place-items: center;
  width: 64px; height: 64px; flex: none;
  border: 1.5px solid var(--wc-ring);
  border-radius: 50%;
  background: transparent; color: var(--wc-text-heading);
  cursor: pointer;
  transition: background var(--wc-fast) var(--wc-ease), color var(--wc-fast) var(--wc-ease), border-color var(--wc-fast);
}
.wc-play svg { width: 18px; height: 18px; margin-left: 3px; }
.wc-play:hover { background: var(--wc-surface); border-color: var(--wc-accent); }
.wc-play.is-playing,
.wc-play[aria-pressed="true"] { background: var(--wc-sage); border-color: var(--wc-sage); color: var(--wc-white); }
.wc-play.is-playing svg,
.wc-play[aria-pressed="true"] svg { margin-left: 0; }
.wc-play--sm { width: 44px; height: 44px; }
.wc-play--sm svg { width: 14px; height: 14px; }

/* Clip list (sample detections) */
.wc-clips { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--wc-line-sage); }
.wc-clip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--wc-space-6);
  padding: var(--wc-space-6) 0;
  border-bottom: 1.5px solid var(--wc-line-sage);
}
.wc-clip__when { margin: 0 0 var(--wc-space-2); font-size: var(--wc-text-xl); font-weight: 500; color: var(--wc-text-heading); letter-spacing: -0.01em; }
.wc-clip__file {
  margin: 0;
  font-family: var(--wc-font-mono); font-size: var(--wc-text-base);
  color: var(--wc-text-faint);
  overflow-wrap: anywhere;
}
/* Playback progress — set --wc-progress 0..1 from JS */
.wc-clip__progress { grid-column: 2 / -1; height: 3px; border-radius: 2px; background: var(--wc-line-sage); overflow: hidden; }
.wc-clip__progress::after { content: ""; display: block; height: 100%; width: calc(var(--wc-progress, 0) * 100%); background: var(--wc-terracotta); }
@media (max-width: 600px) {
  .wc-clip { grid-template-columns: auto 1fr; }
  .wc-clip > .wc-pill { grid-column: 2; justify-self: start; }
  .wc-clip__when { font-size: var(--wc-text-base); }
  .wc-clip__file { font-size: var(--wc-text-xs); }
}

/* Station panel (one monitoring station on the map) */
.wc-station {
  background: var(--wc-surface);
  border-radius: var(--wc-radius-panel);
  box-shadow: var(--wc-shadow-card);
  overflow: hidden;
}
.wc-station__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wc-space-5);
  padding: var(--wc-space-7) var(--wc-space-8);
  background: var(--wc-accent); color: var(--wc-white);
}
.wc-station__head :is(h2,h3) { margin: 0; color: var(--wc-white); }
.wc-station__habitat { font-family: var(--wc-font-mono); font-size: var(--wc-text-sm); letter-spacing: var(--wc-tracking-mono); text-transform: uppercase; opacity: .85; }
.wc-station__stats { display: flex; flex-wrap: wrap; gap: var(--wc-space-9); padding: var(--wc-space-7) var(--wc-space-8); border-bottom: 1px solid var(--wc-border-soft); }
.wc-station__body { padding: var(--wc-space-7) var(--wc-space-8); display: grid; gap: var(--wc-space-4); }

/* Map marker (pin for a station on an illustrated or tiled map) */
.wc-marker {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 3px solid var(--wc-white);
  border-radius: 50%;
  background: var(--wc-sage); color: var(--wc-white);
  font-family: var(--wc-font-mono); font-size: var(--wc-text-sm); font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform var(--wc-fast) var(--wc-ease), background var(--wc-fast);
}
.wc-marker:hover, .wc-marker.is-active { transform: scale(1.15); background: var(--wc-terracotta); }

/* Tabs (Birds / Mammals / Camera, etc.) */
.wc-tabs {
  display: flex; gap: var(--wc-space-2);
  padding: 4px;
  background: var(--wc-chip-bg);
  border-radius: var(--wc-radius-pill);
  width: fit-content; max-width: 100%; overflow-x: auto;
}
.wc-tab {
  padding: 8px 20px;
  border: 0; border-radius: var(--wc-radius-pill);
  background: transparent; color: var(--wc-text-muted);
  font-family: var(--wc-font-sans); font-size: var(--wc-text-base); font-weight: 600;
  letter-spacing: var(--wc-tracking-ui);
  cursor: pointer; white-space: nowrap;
  transition: background var(--wc-fast), color var(--wc-fast);
}
.wc-tab:hover { color: var(--wc-text-heading); }
.wc-tab[aria-selected="true"], .wc-tab.is-active { background: var(--wc-sage); color: var(--wc-white); }
.wc-tab__count { font-family: var(--wc-font-mono); font-size: 0.8em; opacity: .75; margin-left: 4px; }

/* Proportional species bar list (station composition) */
.wc-barlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wc-space-3); }
.wc-barlist li { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr auto; align-items: center; gap: var(--wc-space-4); }
.wc-barlist__bar { height: 10px; border-radius: var(--wc-radius-pill); background: var(--wc-bar-empty); overflow: hidden; }
.wc-barlist__bar::after { content: ""; display: block; height: 100%; width: calc(var(--wc-value, 0) * 100%); background: var(--wc-bar); border-radius: inherit; }
.wc-barlist__value { font-family: var(--wc-font-mono); font-size: var(--wc-text-sm); color: var(--wc-text-muted); text-align: right; }

/* Image gallery (trail cam / photo grid) */
.wc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--wc-space-3); }
.wc-gallery__item {
  position: relative; margin: 0; padding: 0; border: 0;
  aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: var(--wc-bg-alt); cursor: zoom-in;
}
.wc-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--wc-med) var(--wc-ease); }
.wc-gallery__item:hover img { transform: scale(1.04); }
.wc-gallery__caption {
  position: absolute; inset: auto 0 0 0;
  padding: 18px 10px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
  color: var(--wc-white);
  font-family: var(--wc-font-mono); font-size: var(--wc-text-xs);
  text-align: left;
}

/* Lightbox */
.wc-lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: var(--wc-space-8);
  background: rgba(24, 28, 25, .92);
}
.wc-lightbox[hidden] { display: none; }
.wc-lightbox__figure { margin: 0; display: grid; gap: var(--wc-space-4); max-width: min(1100px, 100%); }
.wc-lightbox__figure img { max-height: 78vh; width: auto; margin-inline: auto; border-radius: 12px; }
.wc-lightbox__caption { color: var(--wc-ink-on-bark); font-family: var(--wc-font-mono); font-size: var(--wc-text-sm); text-align: center; }
.wc-lightbox__close, .wc-lightbox__nav {
  position: absolute;
  display: grid; place-items: center;
  width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: var(--wc-white); cursor: pointer;
}
.wc-lightbox__close { top: 20px; right: 20px; }
.wc-lightbox__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.wc-lightbox__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }
.wc-lightbox__close:hover, .wc-lightbox__nav:hover { background: var(--wc-terracotta); }

/* Empty / loading states */
.wc-empty {
  padding: var(--wc-space-10) var(--wc-space-7);
  border: 1.5px dashed var(--wc-line-sage);
  border-radius: var(--wc-radius-card);
  text-align: center; color: var(--wc-text-muted);
}
.wc-skeleton {
  background: linear-gradient(90deg, var(--wc-bg-alt) 0%, var(--wc-surface-tint) 50%, var(--wc-bg-alt) 100%);
  background-size: 200% 100%;
  animation: wc-shimmer 1.4s linear infinite;
  border-radius: var(--wc-radius-sm);
}
@keyframes wc-shimmer { to { background-position: -200% 0; } }


/* 10. FORMS ---------------------------------------------------------------- */
.wc-field { display: grid; gap: var(--wc-space-2); }
.wc-label { font-weight: 700; font-size: var(--wc-text-base); color: var(--wc-text-heading); }
.wc-label .wc-required { margin-left: 6px; font-size: var(--wc-text-xs); font-weight: 400; color: var(--wc-terracotta); }
.wc-input, .wc-select, .wc-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--wc-border);
  border-radius: var(--wc-radius-btn);
  background: var(--wc-surface);
  color: var(--wc-text);
  font: inherit; font-size: var(--wc-text-base);
  transition: border-color var(--wc-fast), box-shadow var(--wc-fast);
}
.wc-input:focus, .wc-select:focus, .wc-textarea:focus {
  outline: none;
  border-color: var(--wc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wc-sage) 25%, transparent);
}
.wc-footer :is(.wc-input, .wc-select, .wc-textarea) { border-color: transparent; }
.wc-footer .wc-label { color: var(--wc-white); }

/* File drop zone (for partners uploading audio & images) */
.wc-dropzone {
  display: grid; place-items: center; gap: var(--wc-space-3);
  padding: var(--wc-space-10) var(--wc-space-7);
  border: 2px dashed var(--wc-line-sage);
  border-radius: var(--wc-radius-card);
  background: var(--wc-surface-tint);
  color: var(--wc-text-muted);
  text-align: center;
  transition: border-color var(--wc-fast), background var(--wc-fast);
}
.wc-dropzone.is-dragover { border-color: var(--wc-terracotta); background: color-mix(in srgb, var(--wc-terracotta) 10%, var(--wc-surface)); }

/* Toggle (checkbox styled as switch) */
.wc-switch { position: relative; display: inline-flex; align-items: center; gap: var(--wc-space-3); cursor: pointer; }
.wc-switch input { appearance: none; width: 44px; height: 26px; margin: 0; border-radius: var(--wc-radius-pill); background: var(--wc-line); cursor: pointer; transition: background var(--wc-fast); }
.wc-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--wc-white); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform var(--wc-fast) var(--wc-ease); }
.wc-switch input:checked { background: var(--wc-sage); }
.wc-switch input:checked::after { transform: translateX(18px); }


/* 11. UTILITIES & ACCESSIBILITY ------------------------------------------- */
:focus-visible { outline: 2px solid var(--wc-focus); outline-offset: 3px; border-radius: 4px; }

.wc-sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wc-center    { text-align: center; }
.wc-rounded   { border-radius: var(--wc-radius-card); overflow: hidden; }
.wc-tabular   { font-variant-numeric: tabular-nums; }
.wc-divider   { height: 1.5px; border: 0; background: var(--wc-line-sage); margin-block: var(--wc-space-7); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .wc-header, .wc-topbar, .wc-to-top, .wc-play, .wc-icon-btn { display: none !important; }
  .wc-species, .wc-station, .wc-post { box-shadow: none; break-inside: avoid; }
}