/* ============================================================================
 * efi-brand.css -- Emergent Frontiers Institute marketing site (apex)
 *
 * Loads LAST, after the /shared/ unified-UI stylesheets:
 *   tokens.css fonts.css reset.css base.css layout.css components.css
 *   utilities.css  (Alias /shared/ -> /srv/efi-unified-ui/static/)
 *
 * Provenance: chrome + component sections adapted 2026-06-12 from the
 * experiencerteam.com apex site.css (the Network-direction reference
 * implementation), per decision D-EFIAPEX-B/C. Token definitions are NOT
 * duplicated here -- /shared/css/tokens.css is the single source of truth.
 * EFI accent mapping: button/fill accents use teal, small typographic
 * accents (eyebrow labels, border accents) use gold. The experiencerteam
 * coral accent is not used on this site.
 *
 * Brand-local token compat (defined here, mirroring the apex-local pattern,
 * because they are not part of the shared token set):
 *   --card-border  visible edge for plain boxed cards in light mode
 *   --shadow-sm    lifted in light mode so cards read on the warm bg
 * ============================================================================ */

:root {
  --card-border: #d0d6dc;
  --shadow-sm:   0 1px 3px rgba(20, 30, 40, 0.10);
  /* Hero eyebrow. Deliberately NOT var(--gold): the hero sits on a dark scrim in
     both themes, while --gold-soft inverts to #2e2418 in dark mode and --gold
     (#d99838) only reaches 3.9:1 against the 2026-07-26 photography even under a
     heavy scrim. This pale gold holds 4.6:1 or better on all four slides in both
     themes, so it is a single fixed value rather than a theme-flipping token. */
  --hero-eyebrow: #f2dfc0;
  /* Hero CTA fill. Same reasoning as --hero-eyebrow: the hero is a dark surface in
     BOTH themes, but --teal flips to #5cb8b8 in dark mode, where white label text
     falls to 2.33:1, and --teal-deep flips to #4ba0a0 at 3.07:1. Those tokens are
     correct everywhere else on the site, where the surface behind a button really
     does change with the theme. Here they invert the wrong way, so the hero button
     takes fixed values. White on this fill is 7.38:1 in both themes. Hover darkens,
     which is the correct direction on a dark surface. */
  --hero-cta-bg:       #1a5f5f;
  --hero-cta-bg-hover: #14504f;
}
[data-theme="dark"] {
  --card-border: #232b33;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: dark) {
  [data-theme="system"], :root:not([data-theme]) {
    --card-border: #232b33;
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Offset in-page anchor landings (and scrollIntoView) below the fixed nav so
   linked-to sections aren't tucked under the bar. */
html { scroll-padding-top: calc(var(--nav-height) + 16px); }
/* A jumped-to <section id> would otherwise land its border-box top under the
   nav, leaving the section's own large top padding as empty space above the
   heading (the heading appeared a few lines down from the top). The negative
   scroll-margin-top cancels that top padding -- it mirrors .section's
   clamp(3rem,8vw,5rem) exactly -- so the heading itself lands just below the
   nav. scroll-padding-top above still supplies the nav clearance. */
section[id] { scroll-margin-top: calc(-1 * clamp(3rem, 8vw, 5rem)); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html {
  font-size: calc(16px * var(--fs-scale));
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 200ms ease, color 200ms ease;
  overflow-x: hidden;
}

a { color: var(--teal-deep); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--teal); }
img { max-width: 100%; display: block; }
em { font-style: italic; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select, button { font-family: var(--font-chrome); }

/* ============================================================================
 * SKIP LINK + READING PROGRESS
 * ============================================================================ */
.skip-link {
  position: fixed; top: -100%; left: 50%; transform: translateX(-50%);
  background: var(--navy); color: var(--text-on-navy); padding: .6em 1.5em;
  border-radius: 0 0 8px 8px; z-index: var(--z-modal); font-family: var(--font-chrome);
  font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

.reading-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px;
  z-index: var(--z-progress); background: transparent;
  pointer-events: none;
}
.reading-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transition: width 50ms linear;
}

/* ============================================================================
 * MAIN NAV -- sticky; transparent over hero, solid navy after scroll
 * ============================================================================ */
.main-nav {
  position: fixed; top: 3px; left: 0; right: 0; z-index: var(--z-nav);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s ease, box-shadow .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
.main-nav.scrolled {
  background: var(--navy);
  border-bottom-color: var(--navy-deep);
  box-shadow: 0 2px 24px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.5rem;
  height: var(--nav-height);
}

/* Brand */
.nav-brand {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--text-on-navy);
  transition: color .3s ease;
}
.nav-brand:hover { color: var(--text-on-navy); }
.brand-icon {
  color: var(--gold); font-size: 1.25em;
  transition: color .3s ease;
}
.brand-logo {
  height: 56px;
  width: 56px;
  flex-shrink: 0;
  /* Subtle shadow so the dawn mark lifts off the navy nav bg. */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
  transition: transform .3s ease, filter .3s ease;
}
.nav-brand:hover .brand-logo {
  /* Sunrise lift: the mark rises and brightens, gold core haloed in teal
     (sibling of the experiencerteam hover rotate + warm glow). */
  transform: translateY(-2px) scale(1.06);
  filter: drop-shadow(0 0 5px rgba(217,152,56,0.55))
          drop-shadow(0 0 12px rgba(42,138,138,0.35));
}
@media (max-width: 480px) {
  .brand-logo { height: 49px; width: 49px; }
}
.main-nav:not(.scrolled) .nav-brand,
.main-nav:not(.scrolled) .nav-links > li > a,
.main-nav:not(.scrolled) .nav-util-btn,
.main-nav:not(.scrolled) .lang-label,
.main-nav:not(.scrolled) .hamburger-bar {
  color: var(--text-on-navy);
}
.main-nav:not(.scrolled) .hamburger-bar { background: var(--text-on-navy); }

/* ============================================================================
 * MEMBERS-ONLY SUB NAV over the hero -- apex only
 * ============================================================================
 * The members bar (/shared/css/gated-nav.css, injected by site.js when a
 * signed-in member is detected) is a solid navy band by default. That is
 * correct inside the community app and the research hub, which have no hero:
 * there it sits directly under a solid nav and the two read as one header.
 *
 * On this site's homepage the main nav is TRANSPARENT until the hero carousel
 * has scrolled past, so a solid sub bar would hang under a transparent one as
 * a navy stripe across the hero photography. These rules give the sub bar the
 * same two states as .main-nav, toggled by the same class from the same
 * scroll handler in site.js, so the two bars change together.
 *
 * WHY #member-nav AND NOT .gated-subheader. Two reasons, both load-bearing:
 *
 *   1. SCOPE. gated-nav.css is SHARED with the forum and the hub. A rule that
 *      made .gated-subheader transparent would follow it into both, where
 *      there is no hero to be transparent over and no scroll handler to turn
 *      it solid again -- an unreadable bar on every in-app page. #member-nav
 *      is the apex's own container and exists nowhere else.
 *
 *   2. LOAD ORDER. site.js appends gated-nav.css to <head> at runtime, so it
 *      lands AFTER this file and would win any equal-specificity contest.
 *      The ID selector outranks it whatever the order, which is what makes
 *      this robust rather than accidentally-working.
 *
 * NO BLUR AND NO SHADOW, deliberately, in either state. gated-nav.css states
 * the reason: the main nav carries backdrop-filter and a 24px shadow to lift
 * itself off scrolling content, and a second set stacked directly beneath it
 * makes a murky band. Only the background changes.
 *
 * THE TEAL RULES STAY VISIBLE IN BOTH STATES (corrected 2026-08-03). The first
 * version faded them out with the background, on the reasoning that the main
 * nav drops its border over the hero too. That was wrong for this bar: the
 * main nav has the page edge above it and the hero below, so it needs no
 * edges, whereas this bar floats in the middle of a photograph with nothing
 * else marking where the chrome ends. Without the rules it read as loose text
 * lying on the image. Only the BACKGROUND changes between states.
 * ---------------------------------------------------------------------------- */
#member-nav .gated-subheader {
  background: transparent;
  transition: background .4s ease;
}
#member-nav .gated-subheader.scrolled {
  background: var(--navy);
}
/* Over the hero the trigger's hover tint is the only thing marking the bar,
   and the default rgba(255,255,255,.08) is nearly invisible against a photo.
   Lift it just in the transparent state; the scrolled state keeps the value
   gated-nav.css shares with .nav-links > li > a:hover. */
#member-nav .gated-subheader:not(.scrolled) .gnav-trigger:hover,
#member-nav .gated-subheader:not(.scrolled) .gnav-link:hover {
  background: rgba(255, 255, 255, .18);
}

/* ----------------------------------------------------------------------------
 * MAKING ROOM FOR THE MEMBERS BAR
 *
 * The bar is `position: fixed`, so it takes no space in flow and simply covers
 * whatever is beneath it. Every offset on this site was written against ONE
 * fixed bar of var(--nav-height); a second one ~45px tall silently ate the top
 * of the page for signed-in members. Measured at 375x667: the hero eyebrow was
 * overlapped by up to 44px on every slide, and .content-page (which pads by
 * nav-height + 3px) was short by the same amount on every page with no hero.
 *
 * --gated-h is set from JavaScript out of the bar's real offsetHeight rather
 * than hardcoded here, because the height is not a constant: the A-/A/A+ font
 * controls resize the chrome text, and on a narrow phone the bar can wrap to
 * two rows. The 45px fallback only applies if that measurement never runs.
 *
 * The class lives on <html>, not <body>, so scroll-padding-top can key off it
 * -- an in-page anchor otherwise lands underneath the bar. (The research hub
 * uses body.has-gated-subheader for its own layout; same name on purpose, one
 * level up because this rule needs the root element.)
 *
 * THE HERO GETS TALLER, IT DOES NOT JUST GET PADDING. .hero-slide centres its
 * content with flex, so padding-top alone moves the content down by only half
 * the padding. Growing .hero-carousel by --gated-h AND padding .hero-slide by
 * --gated-h moves it down by exactly --gated-h, which restores the same
 * clearance under the chrome that the page had before the bar existed. The
 * background image is inset:0 and simply covers the taller box.
 * ---------------------------------------------------------------------------- */
html.has-gated-subheader {
  scroll-padding-top: calc(var(--nav-height) + 16px + var(--gated-h, 45px));
}
html.has-gated-subheader .hero-carousel {
  height: calc(80vh + var(--gated-h, 45px));
  min-height: calc(480px + var(--gated-h, 45px));
}
html.has-gated-subheader .hero-slide {
  padding-top: var(--gated-h, 45px);
}
html.has-gated-subheader .content-page {
  padding-top: calc(var(--nav-height) + 3px + var(--gated-h, 45px));
}
@media (max-width: 520px) {
  html.has-gated-subheader .hero-carousel {
    height: calc(70vh + var(--gated-h, 45px));
    min-height: calc(420px + var(--gated-h, 45px));
  }
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  padding: 6px;
  z-index: calc(var(--z-nav) + 1);
}
.hamburger-bar {
  width: 22px; height: 2px; background: var(--text-on-navy);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease, background .3s ease;
}
.nav-hamburger.open .hamburger-bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.open .hamburger-bar:nth-child(2) { opacity: 0; }
.nav-hamburger.open .hamburger-bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Collapsible nav area */
.nav-collapse {
  display: flex; align-items: center; gap: .75rem;
  flex: 1; justify-content: flex-end;
}

/* Nav links */
.nav-links {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.nav-links > li > a {
  display: block; padding: .5rem .85rem;
  font-family: var(--font-chrome);
  font-size: .875rem; font-weight: 500;
  letter-spacing: .02em;
  color: var(--text-on-navy);
  transition: color .2s ease, background .2s ease;
  border-radius: 4px;
}
.nav-links > li > a:hover {
  color: var(--text-on-navy);
  background: rgba(255,255,255,.08);
}
.nav-links > li > a.active {
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--gold);
}

/* Section dropdowns: hybrid nav items. The top link navigates to the hub; the
   submenu reveals on hover (desktop) or when the caret toggles .is-open
   (keyboard/touch). The forum inlines this same nav, so keep it self-contained. */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-caret {
  background: none; border: 0; cursor: pointer; color: var(--text-on-navy);
  padding: .5rem .35rem; display: inline-flex; align-items: center; line-height: 1;
}
.nav-caret::after {
  content: ""; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .75; transition: transform .15s ease;
}
.nav-item.is-open .nav-caret::after { transform: rotate(180deg); }
.nav-submenu {
  position: absolute; top: 100%; left: 0; margin: 0; padding: 6px;
  min-width: 212px; list-style: none;
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(20,30,40,.18);
  display: none; z-index: var(--z-nav);
}
.nav-item:hover .nav-submenu,
.nav-item.is-open .nav-submenu { display: block; }
.nav-submenu li { width: 100%; }
.nav-submenu a {
  display: block; padding: 8px 12px; border-radius: 7px; white-space: nowrap;
  font-family: var(--font-chrome); font-size: .85rem; color: var(--navy);
  text-decoration: none;
}
.nav-submenu a:hover { background: var(--bg-strip); }
.nav-submenu .nav-submenu-highlight { font-weight: 700; color: var(--gold); }

/* .auth-required: hidden by default (et_authed=1 parent-domain cookie wiring
 * lands in a later WP). Beta UX: items remain hidden until logged in.
 * Per WP-1.6.5 R1.3b decision (operator option b). */
.auth-required { display: none; }

/* Nav utilities cluster */
.nav-utils {
  display: flex; align-items: center; gap: .25rem;
  margin-left: .5rem;
  padding-left: .75rem;
  border-left: 1px solid rgba(255,255,255,.15);
}
.nav-util-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 4px;
  color: var(--text-on-navy);
  transition: background .2s ease, color .2s ease;
}
.nav-util-btn:hover { background: rgba(255,255,255,.08); }

.font-controls {
  display: inline-flex; align-items: center;
  border-radius: 4px;
  overflow: hidden;
}
.font-controls .font-btn {
  width: 30px; height: 30px;
  font-family: var(--font-chrome); font-weight: 600;
  font-size: 11px; letter-spacing: .04em;
}
.font-controls .font-btn-active {
  background: rgba(255,255,255,.12);
}

#theme-toggle .icon-moon { display: none; }
[data-theme="dark"] #theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] #theme-toggle .icon-moon { display: inline; }

.lang-dropdown-wrap { position: relative; }
.lang-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  width: auto; padding: 0 .5rem;
}
.lang-label { font-family: var(--font-chrome); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.lang-dropdown {
  position: absolute; top: 100%; right: 0; margin-top: 6px;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--rule); border-radius: 6px;
  box-shadow: var(--shadow-md);
  list-style: none; padding: .5rem 0; margin: 6px 0 0;
  min-width: 200px;
  font-family: var(--font-chrome); font-size: 13px;
  display: none;
  z-index: var(--z-modal);
}
.lang-dropdown.open { display: block; }
.lang-dropdown li {
  padding: .45rem 1rem;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
.lang-dropdown li:hover { background: var(--bg-strip); }
.lang-dropdown li.lang-active { font-weight: 700; color: var(--navy); }
.lang-dropdown li.lang-soon { color: var(--text-faint); cursor: default; }
.lang-dropdown li.lang-soon:hover { background: transparent; }

/* ============================================================================
 * SEARCH OVERLAY MODAL
 * ============================================================================ */
.search-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 30, 40, .82);
  z-index: var(--z-modal);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 1.5rem 0;
  backdrop-filter: blur(8px);
}
.search-overlay[hidden] { display: none; }
.search-overlay-inner {
  width: 100%; max-width: 640px;
  background: var(--bg-card);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 1.5rem 1.25rem 1.25rem;
  position: relative;
}
.search-close {
  position: absolute; top: .5rem; right: .75rem;
  font-size: 28px; font-weight: 300; color: var(--text-soft);
  line-height: 1;
}
.search-box {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .9rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.search-box-icon { color: var(--text-faint); flex-shrink: 0; }
.search-input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--font-chrome); font-size: 16px;
  color: var(--text);
}
.search-kbd {
  font-family: var(--font-chrome); font-size: 11px;
  background: var(--bg-strip); color: var(--text-faint);
  padding: 2px 6px; border-radius: 3px;
}
.search-hint {
  margin-top: 1rem;
  font-family: var(--font-chrome); font-size: 13px;
  color: var(--text-faint);
}


/* Form field primitives (salvaged from the apex auth-modal section;
   used by .request-form and the contact/join forms). */
.auth-field { margin-bottom: 1rem; }
.auth-field label {
  display: block;
  font-family: var(--font-chrome); font-weight: 600; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: .35rem;
}
.auth-field input {
  width: 100%;
  padding: .65rem .8rem;
  font-size: 15px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
.auth-field input:focus {
  outline: 2px solid var(--teal);
  outline-offset: -1px;
  border-color: var(--teal);
}
.auth-submit {
  display: block; width: 100%;
  padding: .8rem;
  font-family: var(--font-chrome); font-weight: 700; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--teal); color: #fff;
  border-radius: 6px;
  margin-top: .5rem;
  transition: background .2s ease;
}
.auth-submit:hover { background: var(--teal-deep); }
/* ============================================================================
 * HERO CAROUSEL -- 4-photo II.7 carousel
 * ============================================================================ */
.hero-carousel {
  position: relative;
  height: 80vh; min-height: 480px;
  overflow: hidden;
  background: var(--navy-deep);
  isolation: isolate;
}
.hero-track {
  position: relative;
  width: 100%; height: 100%;
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 800ms ease;
  display: flex; align-items: center; justify-content: center;
}
.hero-slide.active { opacity: 1; }
.hero-slide img.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
}
/* Two-layer scrim, retuned 2026-07-26 for the new hero photography.
   The previous single gradient was built for near-black images (mean luminance
   0.04 to 0.09 in the text band). The replacements run 0.25 to 0.45, four to nine
   times brighter, and white body copy fell to 2.9:1 over their bright regions.
   Raising one flat gradient far enough would have crushed images chosen for being
   bright and open, so the darkening is split: ::after keeps a modest vertical
   gradient that preserves the frame edges, and ::before adds a soft centred pool
   under the text block only. Combined alpha runs .66 to .74 behind the copy while
   the corners stay near .47. Worst measured contrast across all four slides is
   4.6:1 on the eyebrow, 4.9:1 on the subtitle, 6.0:1 on the title.
   Both pseudo-elements must stay position:absolute so they do not become flex
   items of .hero-slide. */
.hero-slide::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 30, 40, .45) 0%,
    rgba(20, 30, 40, .58) 55%,
    rgba(20, 30, 40, .80) 100%);
  z-index: 0;
}
.hero-slide::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 45%,
    rgba(20, 30, 40, .42) 0%,
    rgba(20, 30, 40, .20) 60%,
    rgba(20, 30, 40, 0) 100%);
  z-index: 0;
}
.hero-slide-content {
  position: relative; z-index: 1;
  max-width: 880px;
  padding: 0 1.5rem;
  text-align: center;
  color: var(--text-on-navy);
}
.hero-eyebrow {
  font-family: var(--font-chrome);
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--hero-eyebrow);
  text-shadow: 0 1px 3px rgba(20, 30, 40, .55);
  margin-bottom: 1rem;
}
.hero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--text-on-navy);
  /* Perceptual insurance over photographic detail. The contrast targets are met
     by the scrim alone; this only stops fine background texture reading through
     the letterforms. */
  text-shadow: 0 2px 6px rgba(20, 30, 40, .45);
}
.hero-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, var(--text-md));
  line-height: 1.6;
  color: var(--text-on-navy-soft);
  text-shadow: 0 1px 4px rgba(20, 30, 40, .45);
  margin: 0 0 1.75rem;
  max-width: 640px;
  margin-left: auto; margin-right: auto;
}
.hero-cta {
  display: inline-block;
  font-family: var(--font-chrome); font-weight: 700; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .85rem 1.6rem;
  background: var(--hero-cta-bg); color: #fff;
  border-radius: 4px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.hero-cta:hover {
  transform: translateY(-2px);
  background: var(--hero-cta-bg-hover);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

.hero-controls {
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 1rem;
  z-index: 2;
}
.hero-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: var(--text-on-navy);
  font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.hero-arrow:hover { background: rgba(255,255,255,.28); }
.hero-dots {
  display: flex; gap: 8px;
}
.hero-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  transition: background .2s ease, transform .2s ease;
}
.hero-dot:hover { background: rgba(255,255,255,.7); }
.hero-dot.active {
  background: var(--teal);
  transform: scale(1.2);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* ============================================================================
 * CONTENT SECTIONS
 * ============================================================================ */
.page-wrap {
  /* The hero is full-bleed behind the transparent nav, so zero out the
     main { padding-top: var(--nav-height) } default that /shared/css/
     layout.css applies (it otherwise leaves a bg-colored band above the
     hero that shows through the unscrolled nav). Content pages re-pad
     via .content-page, which wins by source order. */
  padding-top: 0;
}
.section {
  padding: clamp(3rem, 8vw, 5rem) 1.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
}
.section-narrow {
  max-width: 820px;
}
.section-label {
  font-family: var(--font-chrome);
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 .75rem;
}
.section-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, var(--text-2xl));
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 1rem;
}
.section-title em { font-style: italic; color: var(--teal-deep); }
.section-sub {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 0 1.5rem;
  max-width: 720px;
}
.section-body p {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--text);
  margin: 0 0 1.25rem;
}
.section-body p:last-child { margin-bottom: 0; }
.section-body strong { color: var(--navy); }

.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule), transparent);
  max-width: var(--max-width);
  margin: 0 auto;
}

.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.5vw, var(--text-xl));
  line-height: 1.4;
  color: var(--navy);
  border-left: 3px solid var(--gold);
  padding: .25rem 0 .25rem 1.25rem;
  margin: 2rem 0 2rem;
  max-width: 720px;
}
.pull-quote-attribution {
  display: block;
  margin-top: .75rem;
  font-family: var(--font-chrome);
  font-style: normal; font-weight: 600; font-size: 13px;
  letter-spacing: .03em;
  color: var(--text-soft);
}

.cta-section {
  background: var(--bg-strip);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.cta-section .section-title {
  text-align: center;
}
.cta-section .section-sub {
  margin-left: auto; margin-right: auto;
  text-align: center;
}
.cta-button {
  display: inline-block;
  font-family: var(--font-chrome); font-weight: 700; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .9rem 2rem;
  background: var(--teal); color: #fff;
  border-radius: 4px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.cta-button:hover {
  transform: translateY(-2px);
  background: var(--teal-deep);
  color: #fff;
  box-shadow: 0 8px 24px rgba(217,106,74,.35);
}

/* Coming-soon stub pages */
.coming-soon-page {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(4rem, 10vh, 7rem) 1.5rem;
  text-align: center;
}
.coming-soon-page .section-label { color: var(--gold); }
.coming-soon-page .section-title { font-size: clamp(2rem, 4vw, var(--text-3xl)); }
.coming-soon-page p {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--text-soft);
  line-height: 1.7;
}

/* ============================================================================
 * FOOTER -- 4-column grid: brand / navigation / resources / connect
 * ============================================================================ */
.site-footer {
  background: var(--navy-deep);
  color: var(--text-on-navy);
  padding: 3rem 1.5rem 1.5rem;
  margin-top: 0;
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 2.5rem;
  align-items: start;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-on-navy);
  margin-bottom: .75rem;
}
.footer-tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-on-navy-soft);
  margin: 0 0 1rem;
  max-width: 320px;
}
.footer-social {
  display: flex; gap: .5rem;
}
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  color: var(--text-on-navy);
  transition: background .2s ease;
}
.social-link:hover { background: rgba(255,255,255,.16); color: var(--text-on-navy); }
/* Share button -- sits in the footer social cluster. Matches the on-navy
   social-link surface, but is a labelled pill (it fires the Web Share API /
   clipboard copy, so it carries a visible "Share" label, not just an icon). */
.share-button {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 32px; padding: 0 .85rem;
  background: rgba(255,255,255,.08);
  border: 0; border-radius: 16px;
  color: var(--text-on-navy);
  font-family: var(--font-chrome); font-weight: 700; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
}
.share-button:hover { background: rgba(255,255,255,.16); }
.share-button svg { flex: none; }
/* Confirmation toast for the clipboard fallback. Uses the card surface + text
   pair, which stays legible in both light and dark themes. */
.share-toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translateX(-50%) translateY(8px);
  max-width: calc(100vw - 32px);
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--rule); border-radius: 8px;
  padding: .65rem 1.1rem;
  font-family: var(--font-chrome); font-size: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  opacity: 0; pointer-events: none; z-index: 1000;
  transition: opacity .25s ease, transform .25s ease;
}
.share-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .share-toast { transition: opacity .01s ease; }
  .share-button { transition: none; }
}
.footer-heading {
  font-family: var(--font-chrome); font-weight: 700;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .85rem;
}
.footer-links {
  list-style: none; padding: 0; margin: 0;
}
.footer-links li { margin-bottom: .5rem; }
.footer-links a {
  font-family: var(--font-chrome); font-size: 14px;
  color: var(--text-on-navy-soft);
}
.footer-links a:hover { color: var(--text-on-navy); }
.footer-connect-text {
  font-family: var(--font-chrome); font-size: 14px;
  line-height: 1.6;
  color: var(--text-on-navy-soft);
  margin: 0 0 .75rem;
}
.footer-connect-form {
  display: flex; gap: .5rem;
}
.footer-connect-form input {
  flex: 1;
  padding: .55rem .75rem;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--text-on-navy);
  border-radius: 4px;
  font-family: var(--font-chrome); font-size: 13px;
}
.footer-connect-form input::placeholder { color: rgba(255,255,255,.5); }
.footer-connect-form button {
  padding: .55rem 1rem;
  background: var(--teal); color: #fff;
  font-family: var(--font-chrome); font-weight: 700; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 4px;
}
/* Subscribe form stacks vertically (email -> "Request an account" -> Subscribe)
   so the checkbox line fits the narrow footer column on phones, and the label
   uses the on-navy text colour for contrast on the dark footer. */
.footer-connect-form { flex-direction: column; align-items: stretch; gap: .6rem; }
.footer-connect-form button { width: 100%; }
.footer-connect-form .req-account-check { color: var(--text-on-navy-soft); font-size: 13px; }
.footer-bottom {
  padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
  font-family: var(--font-chrome); font-size: 12px;
  color: var(--text-on-navy-soft);
}
.footer-bottom-links {
  display: flex; gap: 1.25rem;
}
.footer-bottom-links a { color: var(--text-on-navy-soft); }
.footer-bottom-links a:hover { color: var(--text-on-navy); }

/* ============================================================================
 * BACK-TO-TOP
 * ============================================================================ */
.back-to-top {
  position: fixed;
  right: 1.5rem; bottom: 1.5rem;
  width: 44px; height: 44px;
  background: var(--navy);
  color: var(--text-on-navy);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
  z-index: calc(var(--z-nav) - 1);
  box-shadow: var(--shadow-md);
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: var(--navy-deep); transform: translateY(-2px); }

/* ============================================================================
 * RESPONSIVE -- mobile breakpoint at ~860px
 * ============================================================================ */
@media (max-width: 1024px) {
  /* Hamburger appears + pushed to the right edge of the nav bar */
  .nav-hamburger { display: flex; margin-left: auto; }

  /* Drawer is fully removed from layout when closed (display:none) so it
     can never leak icons into the top strip even if max-height clipping
     misbehaves on some mobile browsers. */
  .nav-collapse { display: none; }
  .nav-collapse.open {
    display: flex;
    position: fixed;
    top: var(--nav-height); left: 0; right: 0;
    background: var(--navy);
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 1.5rem 2rem;
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    border-top: 1px solid rgba(255,255,255,.12);
    z-index: var(--z-nav);
  }
  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    margin-bottom: 1rem;
  }
  .nav-links > li { width: 100%; }
  .nav-links > li > a {
    display: block; width: 100%;
    padding: .75rem 0;
  }
  /* Section dropdowns become accordions inside the navy drawer (no hover). */
  .nav-item { flex-wrap: wrap; align-items: center; }
  .nav-item > a.nav-link { width: auto; flex: 1 1 auto; }
  .nav-caret { flex: 0 0 auto; color: var(--text-on-navy); padding: .75rem .5rem; }
  .nav-submenu {
    flex-basis: 100%; position: static; min-width: 0; margin: 0;
    background: transparent; border: 0; box-shadow: none; padding: 0 0 .5rem 1rem;
  }
  .nav-item:hover .nav-submenu { display: none; }
  .nav-item.is-open .nav-submenu { display: block; }
  .nav-submenu a { color: var(--text-on-navy); padding: .5rem 0; font-size: .9rem; }
  .nav-submenu a:hover { background: transparent; }
  .nav-utils {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.15);
    padding-top: .75rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .5rem;
  }
  .nav-utils .font-controls { flex-shrink: 0; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 520px) {
  .hero-carousel { height: 70vh; min-height: 420px; }
  .section { padding-left: 1.25rem; padding-right: 1.25rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
 * Index-body enhancements (May 2026) -- visual interest between the prose
 * sections without changing the editorial copy.
 * ========================================================================== */

/* Tinted section variant. Pale teal wash, full-bleed; the existing
   .section-narrow constrains the inner content width. */
.section-tinted {
  position: relative;
  background: color-mix(in srgb, var(--teal-pale, #f0f7f7) 70%, var(--bg));
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  max-width: none;
  padding-left: clamp(1.5rem, 6vw, 4rem);
  padding-right: clamp(1.5rem, 6vw, 4rem);
}
.section-tinted > * {
  /* Match the text column of the non-tinted sections: those are an 820px
     border-box with 1.5rem inner padding (inner text width 820 - 3rem), so the
     centered tinted children must be 3rem narrower to share the same left/right
     edges. Without this, tinted bands sit 1.5rem left of the rest of the page. */
  max-width: calc(820px - 3rem);
  margin-left: auto;
  margin-right: auto;
}

/* When two adjacent sections are both tinted, or a divider sits between a
   plain and a tinted section, hide the divider -- the tint already provides
   the visual break. */
.section-tinted + .section-divider,
.section-divider + .section-tinted { display: none; }

/* Members-pills (section 2). Soft chip styling, breaks the wall of prose. */
.members-pills {
  list-style: none;
  padding: 0;
  margin: 2rem auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.members-pills li {
  font-family: var(--font-chrome);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--navy);
  border: 1px solid var(--teal);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .members-pills li { color: var(--teal); }

/* Stats grid (section 3). 4 across at desktop, 2 at tablet, 1 at phone. */
.stats-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  border-radius: 6px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.stat-card .stat-figure {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.15;
}
.stat-card .stat-label {
  font-family: var(--font-chrome);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-soft);
}
[data-theme="dark"] .stat-card .stat-figure { color: var(--teal); }
@media (max-width: 860px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { text-align: center; }
}

/* Atmospheric strip between sections 3 and 4. Thin image band that pulls
   the reader's eye out of the prose for a second. */
.atmosphere-strip {
  position: relative;
  width: 100%;
  height: clamp(140px, 18vw, 220px);
  overflow: hidden;
  margin: 0;
}
.atmosphere-strip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  display: block;
}
.atmosphere-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg) 60%, transparent),
    transparent 25%,
    transparent 75%,
    color-mix(in srgb, var(--bg) 60%, transparent)
  );
  pointer-events: none;
}

/* Principles grid (section 4). 3 numbered callouts. */
.principles-grid {
  list-style: none;
  padding: 0;
  margin: 2rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.principle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.principle .principle-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--gold);
  line-height: 1;
  min-width: 1.8em;
}
.principle .principle-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}
.principle .principle-body strong {
  display: block;
  color: var(--navy);
  margin-bottom: 4px;
}
[data-theme="dark"] .principle .principle-body strong { color: var(--teal); }
@media (max-width: 860px) {
  .principles-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
 * v2a ADDITIONS (adapted for EFI) -- status tags, "Get in touch" nav control,
 * feature lists. All built on existing tokens; no new colors.
 * ============================================================================ */

/* --- Feature status tags: [Live] / [Underway] (.status-building) / [Planned] ----------------- */
.status-tag {
  display: inline-block;
  font-family: var(--font-chrome);
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1.5;
  border: 1px solid transparent;
}
.status-live     { background: var(--green-soft);  color: var(--green-deep); border-color: var(--green); }
.status-building { background: var(--gold-soft);   color: var(--gold);       border-color: var(--gold); }
.status-planned  { background: var(--navy-pale);   color: var(--text-soft);  border-color: var(--navy-soft); }
[data-theme="dark"] .status-live     { color: var(--green); }
[data-theme="dark"] .status-building { color: var(--gold); }

.status-legend {
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem;
  margin: 0 0 2rem;
  font-family: var(--font-chrome); font-size: 13px;
  color: var(--text-soft);
  align-items: center;
}
.status-legend .status-tag { margin-right: .4rem; }

/* --- Pill controls in the nav utility row ---------------------------------
 * Was the "Get in touch" pill; Contact moved to the primary link list
 * 2026-07-24, so .nav-help now dresses the JS-injected "Research hub" link
 * and (via .nav-signin) the Sign in / Sign out control. ------------------- */
.nav-help {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-chrome); font-weight: 700;
  font-size: .8rem; letter-spacing: .03em;
  padding: .45rem .9rem;
  background: var(--teal); color: #fff;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.nav-help:hover { background: var(--teal-deep); color: #fff; transform: translateY(-1px); }
.nav-help::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
}
/* Sign in: outlined variant so it reads as distinct from the filled contact pill. */
.nav-signin { background: transparent; color: var(--teal-deep); box-shadow: inset 0 0 0 1.5px var(--teal); }
.nav-signin:hover { background: var(--teal); color: #fff; }
.nav-signin::before { content: none; }
/* On mobile drawer the help button stretches full width for thumb reach. */
@media (max-width: 1024px) {
  .nav-help { width: 100%; justify-content: center; padding: .75rem; font-size: .9rem; }
}

/* --- Feature list (Get Support / Advocacy / Share section items) ---------- */
.feature-list { list-style: none; padding: 0; margin: 1.5rem auto 0; display: grid; gap: 14px; }
.feature-item {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.feature-item h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-md); color: var(--text);
  margin: 0 0 .4rem;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.feature-item p {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--text-soft); margin: 0;
}
.feature-item p + p { margin-top: .6rem; }

/* Lead paragraph under a section title. */
.section-lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0 0 1.5rem;
  max-width: 760px;
}

/* Policy pages: tighter measure, clear headings. */
.policy-body h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-md); color: var(--navy);
  margin: 2rem 0 .5rem;
}
[data-theme="dark"] .policy-body h3 { color: var(--teal); }
.policy-body p, .policy-body li {
  font-family: var(--font-body); font-size: var(--text-base);
  line-height: 1.7; color: var(--text);
}
.policy-body ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.policy-body li { margin-bottom: .4rem; }
.policy-lead {
  font-style: italic;
  color: var(--text-soft);
  border-left: 3px solid var(--teal);
  padding-left: 1rem;
  margin: 0 0 1.5rem;
}

/* Content pages (no hero): offset main below the fixed nav. */
.content-page { padding-top: calc(var(--nav-height) + 3px); }
.page-intro { max-width: 820px; margin: 0 auto; padding: clamp(2rem,5vw,3rem) 1.5rem 0; }
.page-intro .section-label { color: var(--gold); }

/* Headings and lists inside .section-body (content pages). */
.section-body h3, h3.policy-h {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-md); color: var(--navy);
  margin: 0 0 .5rem;
}
[data-theme="dark"] .section-body h3, [data-theme="dark"] h3.policy-h { color: var(--teal); }
.section-body ul { padding-left: 1.25rem; margin: 0 0 1.25rem; }
.section-body li { font-family: var(--font-body); font-size: var(--text-md); line-height: 1.7; color: var(--text); margin-bottom: .4rem; }

/* Content pages: a .section right after the .page-intro should not stack a
   full section's top padding under the intro. Tightens the gap on every
   page-intro page at once (apex-only; the forum has no .page-intro). */
.page-intro + .section { padding-top: 1rem; }

/* "Request an account" opt-in checkbox, shared across the capture forms
   (newsletter, solidarity, peer-training, share). */
.req-account-check { display: flex; gap: .45rem; align-items: flex-start; font-size: .85rem; line-height: 1.45; text-align: left; margin: .15rem 0; color: var(--text-soft); }
.req-account-check input { margin-top: .2rem; flex: none; }

/* Research page: "request an investigation" form (reuses .auth-field/.auth-submit). */
.request-form { max-width: 640px; margin-top: 1.5rem; }
.request-form .auth-field { margin-bottom: 1rem; }
.auth-field textarea, .auth-field select {
  width: 100%; padding: .65rem .8rem; font-size: 15px;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--bg); color: var(--text); font-family: var(--font-chrome);
}
.auth-field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.auth-field textarea:focus, .auth-field select:focus {
  outline: 2px solid var(--teal); outline-offset: -1px; border-color: var(--teal);
}
.request-form .auth-submit { width: auto; display: inline-block; padding: .8rem 1.6rem; margin-top: .25rem; }

/* Research library: compact reference lists. */
.lib-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.lib-list li {
  font-family: var(--font-body); font-size: var(--text-base);
  line-height: 1.6; color: var(--text);
  padding: .6rem 0; border-top: 1px solid var(--rule-soft);
}
.lib-list li:first-child { border-top: 0; }
.lib-list .lib-title { font-weight: 700; }
.lib-list .lib-note { color: var(--text-soft); }
.lib-tag {
  display: inline-block; font-family: var(--font-chrome);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px; vertical-align: middle;
  background: var(--navy-pale); color: var(--text-soft); border: 1px solid var(--navy-soft);
}
.lib-tag.lib-official { background: var(--teal-pale); color: var(--teal-deep); border-color: var(--teal); }
.lib-tag.lib-peer { background: var(--green-soft); color: var(--green-deep); border-color: var(--green); }
.lib-tag.lib-debated { background: var(--gold-soft); color: var(--gold); border-color: var(--gold); }
[data-theme="dark"] .lib-tag.lib-peer { color: var(--green); }
[data-theme="dark"] .lib-tag.lib-debated { color: var(--gold); }

/* Research page: jump-link TOC + heading anchor offset for the long directory. */
.res-toc { display:flex; flex-wrap:wrap; gap:8px; margin:1.25rem auto 0; padding:0; list-style:none; }
.res-toc a {
  display:inline-block; padding:5px 12px; border-radius:999px;
  background:var(--bg-strip); color:var(--navy); border:1px solid var(--rule);
  font-family:var(--font-chrome); font-size:13px; font-weight:600;
}
.res-toc a:hover { background:var(--teal); color:#fff; border-color:var(--teal); }
[data-theme="dark"] .res-toc a { color:var(--teal); }
.section-body h3[id] { scroll-margin-top: 84px; }

/* Consecutive .section-body blocks are subsections of one section (About uses
   this for "Who is behind the institute" and "Privacy and pseudonymity"). Their
   h3 carries margin:0 0 .5rem, so without this the subsection heading butts
   straight up against the paragraph above it and the three blocks read as one
   undifferentiated wall. Scoped to the adjacent-sibling pattern, which today
   occurs only in about.html and nowhere in the hub templates that share this
   stylesheet. */
.section-body + .section-body { margin-top: 2rem; }

/* Research page: box around the "Request an investigation" form to set it apart. */
.request-box {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-md);
  margin-top: .5rem;
}
.request-box > .section-body:first-child h3,
.request-box h3 { margin-top: 0; }
.request-box .request-form { margin-top: 1rem; }

/* ============================================================================
 * Card definition fix (2026-05-25). In light mode --bg-card (#fff) is nearly
 * --bg (#faf8f3) and --rule (#e6e8ea) is near-white, so plain boxed cards lost
 * their edge. --card-border gives the plain card family a visible edge (dark
 * left unchanged); --shadow-sm was also lifted in light mode. Accent cards
 * (.pd-card, .request-box, .stat-card) already read via their colored edge and
 * are intentionally excluded so their accent is not overwritten. Placed last so
 * it wins source order over each card's own border shorthand.
 * ============================================================================ */
.feature-item, .principle, .lib-card, .pd-panel {
  border-color: var(--card-border);
}

/* ============================================================================
 * 2026-05-28 polish pass.
 * Site-wide form focus consistency + subtle card hover so the motion
 * language matches .cta-button. Page-scoped form styles (.share-form,
 * .sol-form, .sign-form, .survey-q, .auth-field) keep their own focus
 * styles where they define them; this rule covers the rest.
 * ============================================================================ */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: -1px;
  border-color: var(--teal);
}

/* Subtle hover lift on feature cards (matches .cta-button motion). */
.feature-item { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.feature-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(20, 30, 40, .08);
  border-color: color-mix(in srgb, var(--teal) 35%, var(--card-border));
}
[data-theme="dark"] .feature-item:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

/* Centered CTA row utility (for paragraphs that contain only a primary
   cta-button at the end of a content section). Opt-in; existing inline
   margin-top patterns continue to work as before. */
.cta-row { text-align: center; margin-top: 1.75rem; }
.cta-row .cta-button { margin: 0 auto; }


/* ============================================================================
 * EFI additions -- join/contact request form + below-hero CTA bar.
 * Adapted from the apex index.html inline styles (2026-05-29 pattern); kept
 * here instead of inline so the home page and contact page share them.
 * --efi-error is brand-local (no error token in the shared set).
 * ============================================================================ */
:root { --efi-error: #b3403f; }
[data-theme="dark"] { --efi-error: #e08585; }
@media (prefers-color-scheme: dark) {
  [data-theme="system"], :root:not([data-theme]) { --efi-error: #e08585; }
}

.account-request { max-width: 560px; margin: 1.75rem auto 0; text-align: left; display: grid; gap: .9rem; }
.account-request .ar-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 560px) { .account-request .ar-row { grid-template-columns: 1fr; } }
.account-request .ar-field { display: grid; gap: .3rem; }
.account-request .ar-field > span { font-family: var(--font-chrome); font-weight: 700; font-size: .85rem; }
.account-request .ar-opt { font-weight: 400; color: var(--text-soft); }
.account-request input[type=text], .account-request input[type=email], .account-request textarea,
.account-request select {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--rule);
  border-radius: 8px; background: var(--bg); color: var(--text);
  font-family: var(--font-chrome); font-size: 15px;
}
.account-request textarea { resize: vertical; }
.account-request .ar-check { display: flex; gap: .5rem; align-items: center; font-size: .95rem; }
.account-request button.cta-button { justify-self: start; border: 0; cursor: pointer; }
.account-request .ar-consent { font-size: .8rem; color: var(--text-soft); margin: 0; }
.account-request .ar-status { font-size: .9rem; }
.account-request .ar-status.is-error { color: var(--efi-error); font-weight: 600; }
/* WebView fallback panel (2026-07-27). Shown in place of the Turnstile widget
   when the challenge could not run, e.g. inside the Whova app's in-app browser.
   Tokens only, so it follows light and dark like everything else. */
.account-request .ar-fallback {
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--bg-strip); padding: .9rem 1rem;
}
.account-request .ar-fallback p { font-size: .9rem; line-height: 1.55; margin: 0 0 .5rem; }
.account-request .ar-fallback p:last-child { margin-bottom: 0; }
.account-request .ar-fallback a { font-weight: 700; text-decoration: underline; }
.account-request .ar-fallback .ar-fallback-alt { color: var(--text-soft); font-size: .82rem; }
.account-request .ar-fallback .ar-fallback-ref {
  color: var(--text-faint); font-size: .74rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}
.account-request .hp-field, .footer-connect-form .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ar-done { max-width: 560px; margin: 1.75rem auto 0; }
.ar-done p { margin: 0 0 .5rem; }
/* Boxed card so the form lifts off the tinted CTA strip; teal left accent. */
.account-request { background: var(--bg-card); border: 1px solid var(--card-border, var(--rule)); border-left: 4px solid var(--teal-deep); border-radius: 12px; padding: 1.75rem 1.85rem; box-shadow: var(--shadow-md); }

/* Persistent primary CTA directly below the hero carousel; jumps to #join.
   Fixed deep teal keeps strong white-text contrast in both themes (the
   --teal token lightens in dark mode). */
.hero-cta-bar { text-align: center; margin: 1.6rem auto .25rem; padding: 0 1rem; }
.hero-cta-bar .cta-button { background: #1f6e6e; border-radius: 999px; padding: 1rem 2.5rem; box-shadow: 0 6px 20px rgba(31,110,110,.30); }
.hero-cta-bar .cta-button:hover { background: #185858; box-shadow: 0 10px 26px rgba(31,110,110,.40); }
.hero-cta-note { margin: .6rem 0 0; font-family: var(--font-chrome); font-size: .9rem; color: var(--text-soft); }

/* ============================================================================
 * SMALL-SCREEN REMEDIATION (2026-07-26)
 * Fixes found by measuring every page in headless Chrome at 320/375/390px.
 * Appended (not inlined above) so the whole block is one revert unit; same
 * specificity as the rules it overrides, so source order decides.
 * ==========================================================================*/

/* --- P1: 320px horizontal overflow on /, /projects.html, /contact.html ------
   Cloudflare Turnstile renders a FIXED 300px widget. Inside .account-request's
   1.85rem padding + 5px border that needs 364px, so a 320px viewport clipped
   34px of the form (body{overflow-x:hidden} hid the symptom rather than the
   cause). Trim the padding and let the widget scroll inside its own box.
   Measured: body scrollWidth 354px -> 320px. */
@media (max-width: 400px) {
  .account-request { padding-left: 1rem; padding-right: 1rem; }
  .cf-turnstile { max-width: 100%; overflow-x: auto; }
}

/* --- P3: iOS Safari auto-zoom on focus --------------------------------------
   Mobile Safari zooms the viewport in whenever a focused control's text is
   under 16px, and does NOT zoom back out afterwards. Every form field on the
   site was 15px (contact, join-request, project-suggest). 16px only on the
   small screens where the zoom triggers; desktop keeps the tighter type. */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px; }
}

/* --- P4: touch targets below the 44px guideline -----------------------------
   The hero carousel dots were 9x9px (11x11 when active). The visual size is
   deliberate, so the DOT keeps its dimensions and an invisible ::before
   supplies the hit area. Dot pitch (9px + 16px gap = 25px) is kept at or above
   the 24px hit width so neighbouring dots cannot steal each other's taps. */
.hero-dots { gap: 16px; }
.hero-dot { position: relative; }
.hero-dot::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 44px;
}
.hero-arrow { width: 44px; height: 44px; }
.social-link { width: 44px; height: 44px; }
/* Hamburger measured 34x28: it is the only nav control on a phone, so it gets
   a full 44px square while the 22px bars stay visually unchanged. */
.nav-hamburger {
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}

/* P3 follow-up: the generic input rule above is specificity 0,0,1 and loses to
   .account-request input[type=text] (0,2,1). Restate the original selectors so
   equal specificity + later source order decides, rather than reaching for
   !important. */
@media (max-width: 768px) {
  .account-request input[type=text],
  .account-request input[type=email],
  .account-request textarea,
  .account-request select { font-size: 16px; }
}

/* =========================================================================
   SPECIES LEVEL additions (2026-09-28). Everything above this line is the
   emergentfrontiers.com efi-brand.css, copied unchanged. The rules below are
   this site's own components: plan cards on the index pages, and the essay
   layout. Shared tokens only; no shared token is redefined here.
   ========================================================================= */

/* Plan cards: same look as the project directory cards on projects.html */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:1.25rem}
.proj-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .25s,box-shadow .25s,transform .15s}
.proj-card:hover{border-color:var(--teal);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.proj-card:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.proj-card-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:1.15rem 1.2rem .35rem}
.proj-num{font-size:.7rem;font-weight:700;letter-spacing:.05em;color:var(--text-faint);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}
.vis-badge{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.2rem .55rem;border-radius:var(--radius-pill);white-space:nowrap}
.vis-badge.vis-Public{background:var(--green-soft);color:var(--green-deep)}
.proj-card-body{padding:.15rem 1.2rem 1rem}
.proj-card-body h3{font-size:1.05rem;font-weight:700;line-height:1.3;margin:.15rem 0 .45rem;text-wrap:balance}
.proj-card-body p{color:var(--text-soft);font-size:.85rem;line-height:1.6;margin:0}
.proj-card-foot{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:auto;padding:.7rem 1.2rem;border-top:1px solid var(--rule);font-size:.75rem;color:var(--text-faint)}
.plan-card-intro{border-color:var(--gold);grid-column:1/-1}
.plan-card-intro .proj-num{color:var(--gold)}

/* Essay pages */
.essay-title{text-wrap:balance}
.essay-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;margin-top:1rem;font-size:.85rem;color:var(--text-soft)}
.essay-version{font-weight:700;color:var(--teal-deep)}
.essay-downloads a{display:inline-block;margin-left:.35rem;padding:.15rem .6rem;border:1px solid var(--teal);border-radius:var(--radius-pill);color:var(--teal);text-decoration:none;font-size:.78rem;font-weight:700}
.essay-downloads a:hover{background:var(--teal);color:#fff}
.essay-provenance{margin-top:1rem;padding:.75rem 1rem;border-left:3px solid var(--gold);background:var(--bg-strip);font-size:.85rem;line-height:1.6;color:var(--text-soft)}
.essay{max-width:820px}
.essay-toc{margin:0 0 2rem;padding:1rem 1.25rem;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--bg-card);font-size:.88rem}
.essay-toc-title{font-weight:700;margin:0 0 .5rem;color:var(--teal-deep)}
.essay-toc ul{margin:0;padding-left:1.1rem}
.essay-toc ul ul{margin-top:.2rem}
.essay-toc li{margin:.2rem 0}
.essay-body{font-size:var(--text-md);line-height:1.75}
.essay-body h2{margin-top:2.5rem;padding-top:.5rem;border-top:1px solid var(--rule);scroll-margin-top:90px}
.essay-body h3{margin-top:1.75rem;scroll-margin-top:90px}
.essay-body li{margin-bottom:.4rem}
.essay-body blockquote{border-left:3px solid var(--teal);margin:1rem 0;padding:.25rem 1rem;color:var(--text-soft)}
.table-wrap{overflow-x:auto;margin:1.25rem 0;-webkit-overflow-scrolling:touch}
.essay-body table{border-collapse:collapse;width:100%;font-size:.88rem;line-height:1.5}
.essay-body th,.essay-body td{border:1px solid var(--rule);padding:.5rem .65rem;text-align:left;vertical-align:top}
.essay-body thead th{background:var(--teal-pale);color:var(--text)}
.essay-body a{overflow-wrap:anywhere}
.essay-foot{margin-top:3rem;padding-top:1.25rem;border-top:2px solid var(--rule)}
.essay-foot-title{font-size:1.1rem;margin:0 0 .5rem}
.essay-history{margin:0 0 1rem;padding-left:1.1rem;font-size:.9rem}
.essay-foot-text{font-size:.9rem;color:var(--text-soft)}
.essay-pager{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem;font-weight:700;font-size:.9rem}
.essay-pager a{text-decoration:none}
.essay-next{margin-left:auto;text-align:right}
@media (max-width:768px){.essay-body{font-size:var(--text-base)}}