:root {
  /* Relief theme. A map sheet: warm paper ground, navy ink, map blue.
   * The old names (--navy, --white, --text-dim) are kept as aliases so
   * the 2,600 lines below did not all need touching at once. */
  --paper: #f3f1e9;
  --paper-alt: #e9e6da;
  --paper-deep: #dedac9;
  --surface: #ffffff;

  --ink: #16233f;
  --ink-soft: #44506a;
  --ink-mute: #6f7a90;

  --blue: #1d5fa8;
  --blue-bright: #2a7ac9;
  --blue-deep: #10365f;
  --blue-wash: rgba(29, 95, 168, 0.08);
  --blue-soft: rgba(29, 95, 168, 0.12);

  --sienna: #a8521f;

  --rule-soft: rgba(22, 35, 63, 0.08);
  --rule: rgba(22, 35, 63, 0.15);
  --rule-strong: rgba(22, 35, 63, 0.26);

  --graticule: url("/assets/img/textures/graticule.svg");

  /* aliases */
  --navy: var(--paper);
  --navy-deep: var(--paper-alt);
  --white: var(--ink);
  --text-dim: var(--ink-soft);

  --header-h: 62px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--header-h) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family:
    "Manrope",
    "Avenir Next",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
}

/* ---------- Accessibility helpers ---------- */

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--white);
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 16px;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Header / navigation ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.site-header.scrolled,
.site-header.menu-open {
  background: rgba(13, 22, 48, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.nav-inner {
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0;
  white-space: nowrap;
}

.nav-brand img {
  width: 30px;
  height: 30px;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.nav-links a {
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 7px 11px;
  border-radius: 4px;
  transition: color 0.18s ease, background 0.18s ease;
}

.nav-links a:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.9);
}

.nav-links a.active {
  color: var(--blue);
}

.nav-cta {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 4px;
  background: var(--white);
  color: var(--navy) !important;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.nav-cta:hover {
  background: var(--blue-deep) !important;
  color: var(--navy);
}

/* About dropdown */

.nav-dropdown {
  position: relative;
}

/* Invisible bridge over the gap between the button and the menu, so
   hover isn't lost while the cursor travels down to the menu. */
.nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 7px 11px;
  border-radius: 4px;
  transition: color 0.18s ease, background 0.18s ease;
}

.nav-drop-btn:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.9);
}

.nav-drop-btn.active {
  color: var(--blue);
}

.nav-drop-btn svg {
  width: 13px;
  height: 13px;
  transition: transform 0.18s ease;
}

.nav-dropdown.open .nav-drop-btn svg {
  transform: rotate(180deg);
}

.nav-drop-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 190px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: rgba(13, 22, 48, 0.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(22, 35, 63, 0.15);
  border-radius: 4px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
}

.nav-dropdown.open .nav-drop-menu {
  display: flex;
}

@media (hover: hover) and (min-width: 921px) {
  .nav-dropdown:hover .nav-drop-menu,
  .nav-dropdown:focus-within .nav-drop-menu {
    display: flex;
  }
}

.nav-drop-menu a {
  border-radius: 3px;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--white);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.menu-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 920px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav-links {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 18px 18px;
    background: rgba(13, 22, 48, 0.97);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
    display: none;
  }

  .menu-open .nav-links {
    display: flex;
  }

  .nav-links a {
    padding: 14px 16px;
    font-size: 1.05rem;
    border-radius: 3px;
  }

  .nav-cta {
    margin: 8px 0 0;
    justify-content: center;
    padding: 14px 22px;
  }

  /* In the mobile panel the dropdown flattens into plain links */
  .nav-dropdown {
    display: contents;
  }

  .nav-drop-btn {
    display: none;
  }

  .nav-drop-menu {
    display: contents;
  }
}

/* ---------- Hero ---------- */

.page {
  min-height: 74vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 32px) 24px 56px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
}

.page::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: -2;
  background: var(--navy);
}

@media (prefers-reduced-motion: no-preference) {
  .page::before {
    animation: bg-drift 46s ease-in-out infinite alternate;
  }

  @keyframes bg-drift {
    from {
      transform: scale(1) translateY(0);
    }
    to {
      transform: scale(1.07) translateY(-1.2%);
    }
  }
}

.page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      circle at center,
      rgba(17, 30, 66, 0.02) 0%,
      rgba(17, 30, 66, 0.16) 55%,
      rgba(6, 13, 31, 0.44) 100%
    );
  pointer-events: none;
}

.page main {
  width: min(1080px, 100%);
  text-align: center;
}

/* Block-level so the wordmark keeps its own line above the headline.
   As inline-flex it sat beside the h1 once both got smaller. */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-bottom: 26px;
}

.logo {
  width: clamp(96px, 9vw, 128px);
  height: auto;
  display: block;
}

.brand-text {
  text-align: left;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  font-weight: 600;
}

h1 {
  display: inline-block;
  margin: 0;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h1 .line {
  display: block;
}

h1 .line-two {
  margin-top: 0.02em;
}

h1 .accent {
  color: var(--blue);
}

/* Hero entrance (CSS-only, works without JS) */
@media (prefers-reduced-motion: no-preference) {
  .hero-fade {
    opacity: 0;
    transform: translateY(16px);
    animation: hero-in 0.7s ease forwards;
  }

  .hero-fade.d1 { animation-delay: 0.08s; }
  .hero-fade.d2 { animation-delay: 0.2s; }
  .hero-fade.d3 { animation-delay: 0.34s; }
  .hero-fade.d4 { animation-delay: 0.46s; }

  @keyframes hero-in {
    to {
      opacity: 1;
      transform: none;
    }
  }
}

.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* On pages whose body copy is left-aligned, the button row should be too */
.buttons.start {
  justify-content: flex-start;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 20px;
  border-radius: 4px;
  background: var(--white);
  color: var(--navy);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 700;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.button:hover {
  background: var(--blue-deep);
}

.button.ghost {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(22, 35, 63, 0.5);
  box-shadow: none;
}

.button.ghost:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.9);
}

.socials {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}

.social {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}

.social:hover {
  opacity: 0.82;
}

.social img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.scroll-cue:hover {
  color: var(--white);
}

.scroll-cue svg {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-cue svg {
    animation: cue-bob 1.8s ease-in-out infinite;
  }

  @keyframes cue-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
  }
}

/* ---------- Content sections ---------- */

.section {
  padding: 58px 24px;
  position: relative;
}

.section-inner {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.section.alt {
  background: var(--navy-deep);
}

.section h2 {
  margin: 0 0 14px;
  font-size: 1.3rem;
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 700;
}

.section h2 .accent {
  color: var(--blue);
}

.lede {
  margin: 0;
  max-width: 38rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-dim);
}

.lede + .lede {
  margin-top: 18px;
}

.lede.centered {
  margin-left: auto;
  margin-right: auto;
}

/* Research cards */

.section h2.centered {
  text-align: center;
}

.research-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 44px;
}

@media (max-width: 900px) {
  .research-cards {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

.research-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(22, 35, 63, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  padding: 14px;
  text-align: left;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.research-card:hover {
  border-color: rgba(29, 95, 168, 0.55);
  background: rgba(29, 95, 168, 0.05);
}

.research-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
}

.research-card-body {
  padding: 20px 12px 12px;
}

.research-card h3 {
  margin: 0 0 8px;
  color: var(--white);
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.research-card h3 a {
  color: inherit;
  text-decoration: none;
}

.research-card h3 a:hover {
  color: var(--blue);
  text-decoration: underline;
}

.research-card .card-media {
  display: block;
}

.card-tag {
  display: inline-block;
  margin: 0 0 12px;
  font-style: italic;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white);
}

/* Metadata that is deliberately NOT a link (author, date, session
 * number). Kept visually distinct from the tag pills above so the
 * pills can mean "clickable" and nothing else. */
.card-meta {
  margin: 0 0 12px;
  color: var(--text-dim);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Genre tag: a filled token with a leading dot, so it reads as a
 * selectable category rather than italic caption text. Filling solid
 * on hover previews what clicking does (it becomes the active chip). */
a.card-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 9px;
  border: 1px solid rgba(29, 95, 168, 0.45);
  border-radius: 4px;
  background: rgba(29, 95, 168, 0.09);
  color: var(--blue-bright);
  font-style: normal;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

a.card-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

a.card-tag:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--navy);
}

.see-all {
  margin: 30px 0 0;
  text-align: center;
}

/* Research/Posts index filters + search */

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 30px 0 0;
}

.search-input {
  width: min(340px, 100%);
  padding: 10px 18px;
  border: 1px solid rgba(22, 35, 63, 0.22);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--white);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  transition: border-color 0.18s ease;
}

.search-input::placeholder {
  color: var(--ink-mute);
}

.search-input:focus {
  outline: none;
  border-color: var(--blue);
}

.no-results {
  margin-top: 26px;
}

.filter-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-label {
  margin-right: 2px;
  color: var(--ink-mute);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chip {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid rgba(22, 35, 63, 0.24);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.chip:hover {
  color: var(--white);
  border-color: rgba(29, 95, 168, 0.6);
  background: rgba(29, 95, 168, 0.1);
}

.chip.active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--navy);
}

.research-card.hidden {
  display: none;
}

.research-card .desc {
  margin: 0;
  color: var(--text-dim);
  line-height: 1.6;
  font-size: 0.98rem;
}

/* Research detail pages */

.research-detail {
  padding-top: calc(var(--header-h) + 40px);
  min-height: 60vh;
}

.section-inner.narrow {
  width: min(720px, 100%);
}

/* ---------- Links ----------
 *
 * Three deliberate levels, so a reader can always tell what is
 * clickable without the page turning into a sea of blue:
 *   1. .button / .button.ghost  — primary actions
 *   2. prose links              — underlined, tinted, inside body text
 *   3. tokens (.chip, .card-tag) and .back-link — pill-shaped controls
 */

/* 2. Prose links. Underline sits low enough to stay readable, and the
 *    hover adds a tint so the target is obvious before the click. */
.lede a,
.see-all a,
.post-article p a,
.post-article li a,
.post-article figcaption a,
.research-card .desc a,
.step-list p a,
.fact span a,
.schedule td a,
.embed-caption a,
.atlas-description a,
.atlas-credits a,
.wall-caption a,
.gis-hint a,
.member-meta a,
.paper p a,
.paper li a,
.paper figcaption a,
.facts dd a,
.footer-note a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(29, 95, 168, 0.5);
  border-radius: 3px;
  transition:
    color 0.15s ease,
    text-decoration-color 0.15s ease,
    background 0.15s ease;
}

.lede a:hover,
.see-all a:hover,
.post-article p a:hover,
.post-article li a:hover,
.post-article figcaption a:hover,
.research-card .desc a:hover,
.step-list p a:hover,
.fact span a:hover,
.schedule td a:hover,
.embed-caption a:hover,
.atlas-description a:hover,
.atlas-credits a:hover,
.wall-caption a:hover,
.gis-hint a:hover,
.member-meta a:hover,
.paper p a:hover,
.paper li a:hover,
.paper figcaption a:hover,
.facts dd a:hover,
.footer-note a:hover {
  color: var(--blue-bright);
  text-decoration-color: currentColor;
  background: rgba(29, 95, 168, 0.1);
  box-shadow: 0 0 0 3px rgba(29, 95, 168, 0.1);
}

/* Standalone "go somewhere" link, e.g. Browse all research */
.see-all a {
  font-weight: 700;
}

/* Headline links inside numbered step cards */
.step-list h3 a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(29, 95, 168, 0.6);
  transition: color 0.15s ease;
}

.step-list h3 a:hover {
  color: var(--blue);
}

/* 3. Back navigation: a pill, so it never reads as body text */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 28px;
  padding: 5px 12px;
  border: 1px solid rgba(22, 35, 63, 0.22);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.back-link:hover {
  color: var(--white);
  border-color: rgba(29, 95, 168, 0.6);
  background: rgba(29, 95, 168, 0.09);
}

.research-detail h1 {
  display: block;
  margin: 0 0 18px;
  font-size: clamp(1.6rem, 2.3vw, 2.05rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
  text-shadow: none;
}

.detail-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  border: 1px solid rgba(22, 35, 63, 0.15);
  margin: 32px 0;
}

.research-detail h2 {
  margin: 36px 0 12px;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

/* Get involved */

.cta-panel {
  margin-top: 8px;
  text-align: center;
}

.cta-panel .buttons {
  margin-top: 34px;
}

.cta-panel .socials {
  margin-top: 30px;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid rgba(22, 35, 63, 0.11);
  background: var(--navy-deep);
  padding: 44px 24px 36px;
}

.footer-inner {
  width: min(1080px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
}

.footer-brand img {
  width: 34px;
  height: 34px;
}

.footer-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 8px 12px;
  border-radius: 4px;
  transition: color 0.18s ease, background 0.18s ease;
}

.footer-links a:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.88);
}

.footer-note {
  width: 100%;
  margin-top: 10px;
  color: var(--ink-mute);
  font-size: 0.86rem;
  text-align: center;
}

/* ---------- Responsive hero tweaks ---------- */

@media (max-width: 900px) {
  h1 {
    max-width: 820px;
  }
}

@media (max-width: 760px) {
  .page {
    padding: calc(var(--header-h) + 14px) 18px 64px;
  }

  .brand {
    flex-direction: column;
    gap: 14px;
    margin-bottom: 26px;
  }

  .brand-text {
    text-align: center;
    font-size: clamp(1.7rem, 8vw, 2.35rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
  }

  .logo {
    width: clamp(145px, 45vw, 190px);
  }

  h1 {
    font-size: clamp(2.5rem, 10.8vw, 4rem);
    line-height: 1;
    letter-spacing: -0.04em;
  }

  h1 .line-two {
    margin-top: 0.04em;
  }

  .buttons {
    margin-top: 32px;
    gap: 14px;
  }

  .button {
    width: min(100%, 330px);
    min-width: 0;
    min-height: 64px;
    font-size: 1.35rem;
  }

  .socials {
    margin-top: 24px;
  }

  .social {
    width: 42px;
    height: 42px;
  }

  .section {
    padding: 72px 18px;
  }
}

@media (max-width: 430px) {
  .page {
    padding-left: 16px;
    padding-right: 16px;
  }

  .brand-text {
    font-size: 1.7rem;
  }

  .logo {
    width: 145px;
  }

  h1 {
    font-size: 2.45rem;
  }

  .button {
    min-height: 60px;
    font-size: 1.22rem;
  }
}

/* ---------- Atlas ---------- */

.atlas-shell {
  display: flex;
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  margin-top: var(--header-h);
}

.atlas-panel {
  width: 340px;
  flex-shrink: 0;
  overflow-y: auto;
  background: var(--navy-deep);
  border-right: 1px solid rgba(22, 35, 63, 0.11);
  padding: 26px 24px 34px;
}

.atlas-panel h1 {
  display: block;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 4px 0 8px;
  text-shadow: none;
}

.atlas-subtitle {
  margin: 0 0 8px;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.55;
}

.atlas-panel-label {
  margin: 22px 0 6px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.layer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}

.layer-row:hover {
  background: rgba(255, 255, 255, 0.84);
}

.layer-row input {
  accent-color: var(--blue);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.layer-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid rgba(22, 35, 63, 0.26);
}

.layer-swatch.small {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.layer-name {
  font-size: 0.95rem;
  font-weight: 600;
}

.layer-legend {
  margin: 2px 0 6px 36px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.layer-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-dim);
  text-transform: capitalize;
}

.atlas-description {
  margin: 18px 0 0;
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.6;
}

.atlas-credits {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(22, 35, 63, 0.11);
  color: var(--ink-mute);
  font-size: 0.82rem;
  line-height: 1.5;
}

.atlas-map {
  flex: 1;
  min-height: 320px;
  background: var(--navy-deep);
  position: relative;
}

.atlas-fallback {
  padding: 24px;
  color: var(--text-dim);
}

@media (max-width: 820px) {
  .atlas-shell {
    flex-direction: column;
    height: auto;
  }

  .atlas-panel {
    width: 100%;
    max-height: 44vh;
    border-right: 0;
    border-bottom: 1px solid rgba(22, 35, 63, 0.11);
  }

  .atlas-map {
    height: 62vh;
  }
}

/* Map embedded inside a Post */
.atlas-embed {
  height: 480px;
  border-radius: 4px;
  border: 1px solid rgba(22, 35, 63, 0.17);
  overflow: hidden;
  margin: 32px 0 10px;
}

.embed-caption {
  margin: 0 0 32px;
  color: var(--ink-mute);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* MapLibre chrome, re-themed to the brand */
.maplibregl-popup-content {
  background: var(--paper-alt);
  color: var(--white);
  border-radius: 3px;
  border: 1px solid rgba(29, 95, 168, 0.35);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  padding: 12px 16px;
  font-family: inherit;
}

.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
  border-top-color: var(--paper-alt);
}

.maplibregl-popup-anchor-top .maplibregl-popup-tip {
  border-bottom-color: var(--paper-alt);
}

.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: var(--paper-alt);
}

.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: var(--paper-alt);
}

.maplibregl-popup-close-button {
  color: var(--ink-soft);
  font-size: 18px;
  padding: 2px 8px;
}

.atlas-popup strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
}

.atlas-popup div {
  font-size: 0.88rem;
  color: var(--text-dim);
  margin-top: 2px;
}

.atlas-popup-label {
  font-weight: 700;
  color: var(--white);
}

.maplibregl-ctrl-group {
  background: var(--paper-alt);
  border: 1px solid rgba(22, 35, 63, 0.18);
}

.maplibregl-ctrl-group button + button {
  border-top: 1px solid rgba(22, 35, 63, 0.15);
}

.maplibregl-ctrl button .maplibregl-ctrl-icon {
  filter: invert(1);
}

.maplibregl-ctrl-attrib {
  background: rgba(11, 21, 48, 0.75);
  color: var(--ink-soft);
  font-size: 11px;
}

.maplibregl-ctrl-attrib a {
  color: var(--ink-soft);
}

.maplibregl-ctrl-scale {
  background: rgba(11, 21, 48, 0.6);
  color: var(--ink-soft);
  border-color: rgba(22, 35, 63, 0.34);
}

/* ---------- Posts ---------- */

.post-article {
  width: min(760px, 100%);
  margin: 0 auto;
}

.post-meta {
  margin: 0 0 14px;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.92rem;
}

.post-meta .post-date {
  color: var(--ink-mute);
  font-weight: 600;
}

.post-article h1 {
  display: block;
  margin: 0 0 18px;
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-shadow: none;
}

.post-article .lede {
  max-width: none;
}

.post-article h2 {
  margin: 40px 0 14px;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
}

.post-article p {
  color: var(--text-dim);
  line-height: 1.75;
  font-size: 1.05rem;
  margin: 0 0 20px;
}

.post-article figure {
  margin: 32px 0;
}

.post-article figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  border: 1px solid rgba(22, 35, 63, 0.15);
}

.post-article figcaption {
  margin-top: 10px;
  color: var(--ink-mute);
  font-size: 0.86rem;
}

.post-article a:not(.button) {
  color: var(--blue);
}

.post-article .buttons {
  margin-bottom: 14px;
}

/* p.selector needed: .post-article p would otherwise out-rank these */
.post-article p.post-signoff,
.post-signoff {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid rgba(22, 35, 63, 0.15);
  color: var(--ink-mute);
  font-size: 0.95rem;
}

/* ---------- Homepage explore band ---------- */

.explore-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .explore-band {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

.explore-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(22, 35, 63, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  padding: 30px 28px;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.explore-tile:hover {
  border-color: rgba(29, 95, 168, 0.55);
  background: rgba(29, 95, 168, 0.05);
}

.explore-tile h3 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--blue);
}

.explore-tile p {
  margin: 0;
  color: var(--text-dim);
  line-height: 1.6;
  font-size: 0.98rem;
}

.explore-tile .go {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
  color: var(--white);
  font-size: 0.95rem;
}

/* ---------- Members ---------- */

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--blue-soft);
  border: 1.5px solid rgba(29, 95, 168, 0.45);
  color: var(--blue);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar.large {
  width: 92px;
  height: 92px;
  font-size: 1.9rem;
}

/* Byline (article author line) */

.byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 8px;
}

.byline .avatar {
  width: 42px;
  height: 42px;
  font-size: 0.92rem;
}

.post-article .byline p {
  margin: 0;
}

.post-article .byline p.byline-date {
  margin-top: 2px;
}

.byline-name {
  margin: 0;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--white);
}

.byline-name a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(29, 95, 168, 0.7);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.byline-name a:hover {
  color: var(--blue);
  text-decoration-color: currentColor;
}

.byline-date {
  margin: 2px 0 0;
  color: var(--ink-mute);
  font-size: 0.86rem;
}

/* Member profile page */

.member-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 22px;
}

.member-head h1 {
  display: block;
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 2.4vw, 2.05rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: none;
}

.member-meta {
  margin: 0;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.95rem;
}

.member-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0 0;
}

.member-links a {
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 14px;
  border: 1px solid rgba(22, 35, 63, 0.2);
  border-radius: 4px;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.member-links a:hover {
  color: var(--white);
  border-color: var(--blue);
}

.work-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.work-list a {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(22, 35, 63, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  padding: 11px 14px;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.work-list a:hover {
  border-color: rgba(29, 95, 168, 0.5);
  background: rgba(29, 95, 168, 0.06);
}

.work-list strong {
  display: block;
  color: var(--blue);
  font-size: 0.98rem;
  letter-spacing: 0;
  margin-bottom: 2px;
}

.work-list span {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ---------- Map Wall ---------- */

.wall-grid {
  columns: 3;
  column-gap: 22px;
  margin-top: 44px;
}

@media (max-width: 1000px) {
  .wall-grid {
    columns: 2;
  }
}

@media (max-width: 680px) {
  .wall-grid {
    columns: 1;
  }
}

.wall-item {
  break-inside: avoid;
  margin: 0 0 22px;
  border: 1px solid rgba(22, 35, 63, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  overflow: hidden;
}

.wall-item img {
  width: 100%;
  height: auto;
  display: block;
}

.wall-item-body {
  padding: 14px 16px 16px;
}

.wall-item-body strong {
  display: block;
  font-size: 1rem;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.wall-maker {
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

a.wall-maker {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(29, 95, 168, 0.5);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a.wall-maker:hover {
  color: var(--blue-bright);
  text-decoration-color: currentColor;
}

.wall-caption {
  margin: 6px 0 0;
  color: var(--text-dim);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* ---------- Error page ---------- */

.error-page main {
  text-align: center;
}

.error-code {
  font-size: clamp(5rem, 16vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 0 0 10px;
  color: var(--blue);
}

/* ---------- GIS explainer ---------- */

/* The stack is rotated in 3D, so its painted area is much taller than the
   340x240 box it reserves. The top padding is clearance for that overhang. */
.gis-stack-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
  padding: 130px 0 40px;
  perspective: 1200px;
}

.gis-stack {
  position: relative;
  width: min(340px, 68vw);
  height: 240px;
  transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-42deg);
}

.gis-plane {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  border: 1.5px solid;
  background: rgba(17, 30, 66, 0.6);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.gis-plane svg,
.gis-plane img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gis-plane.pl-points { border-color: rgba(255, 209, 0, 0.7); transform: translateZ(135px); }
.gis-plane.pl-lines  { border-color: rgba(229, 22, 54, 0.7); transform: translateZ(90px); }
.gis-plane.pl-areas  { border-color: rgba(29, 95, 168, 0.75); transform: translateZ(45px); }
.gis-plane.pl-base   { border-color: rgba(22, 35, 63, 0.3); transform: translateZ(0); }

.gis-stack:hover .pl-points,
.gis-stack:focus-within .pl-points { transform: translateZ(195px); }
.gis-stack:hover .pl-lines,
.gis-stack:focus-within .pl-lines { transform: translateZ(130px); }
.gis-stack:hover .pl-areas,
.gis-stack:focus-within .pl-areas { transform: translateZ(65px); }
.gis-stack:hover .pl-base,
.gis-stack:focus-within .pl-base { transform: translateZ(-5px); }

.gis-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gis-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.95rem;
}

.gis-hint {
  margin: 26px 0 0;
  text-align: center;
  color: var(--ink-mute);
  font-size: 0.85rem;
}

/* Numbered step cards */

.step-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  counter-reset: step;
}

@media (max-width: 820px) {
  .step-list {
    grid-template-columns: 1fr;
  }
}

.step-list li {
  position: relative;
  border: 1px solid rgba(22, 35, 63, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  padding: 24px 24px 24px 86px;
}

.step-list li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 24px;
  top: 22px;
  width: 42px;
  height: 42px;
  border-radius: 3px;
  display: grid;
  place-items: center;
  background: var(--blue-soft);
  border: 1.5px solid rgba(29, 95, 168, 0.45);
  color: var(--blue);
  font-weight: 800;
  font-size: 1.25rem;
}

.step-list h3 {
  margin: 0 0 6px;
  font-size: 1.12rem;
  letter-spacing: -0.015em;
}

.step-list p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
}

.step-list a {
  color: var(--blue);
}

/* ---------- Join page ---------- */

.fact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}

@media (max-width: 820px) {
  .fact-grid {
    grid-template-columns: 1fr;
  }
}

.fact {
  border: 1px solid rgba(22, 35, 63, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  padding: 22px;
}

.fact strong {
  display: block;
  color: var(--white);
  font-size: 1.05rem;
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}

.fact span {
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

.schedule {
  width: 100%;
  margin-top: 30px;
  border-collapse: collapse;
}

.schedule th {
  text-align: left;
  padding: 0 14px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.schedule td {
  padding: 16px 14px;
  border-top: 1px solid rgba(22, 35, 63, 0.12);
  color: var(--text-dim);
  font-size: 0.98rem;
  line-height: 1.55;
  vertical-align: top;
}

.schedule td:first-child {
  color: var(--blue);
  font-weight: 700;
  white-space: nowrap;
}

.schedule .tbd {
  color: var(--ink-mute);
  font-style: italic;
}

/* One step up from a normal button, for the single primary action on a
   page. Not a billboard. */
.button.xl {
  min-height: 46px;
  font-size: 1.02rem;
  padding: 12px 26px;
}

.gis-legend li:nth-child(1) .layer-swatch { background: #ffd100; }
.gis-legend li:nth-child(2) .layer-swatch { background: #e51636; }
.gis-legend li:nth-child(3) .layer-swatch { background: var(--blue); }
.gis-legend li:nth-child(4) .layer-swatch { background: rgba(22, 35, 63, 0.55); }

/* ---------- Long-form / paper layout ---------- */

.paper {
  width: min(720px, 100%);
  margin: 0 auto;
}

.paper h1 {
  margin: 0 0 20px;
}

/* First rule under the title would double up with the h1's own spacing */
.paper > h2:first-of-type {
  margin-top: 30px;
}

.paper .back-link {
  margin-bottom: 22px;
}

.paper p {
  margin: 0 0 16px;
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height: 1.72;
}

.paper h2 {
  margin: 36px 0 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(22, 35, 63, 0.15);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.paper h3 {
  margin: 22px 0 8px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.paper ul,
.paper ol {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height: 1.72;
}

.paper li {
  margin-bottom: 7px;
}

/* Abstract-style opening question */
.abstract {
  margin: 0 0 22px;
  padding: 16px 18px;
  border-left: 2px solid var(--blue);
  background: rgba(29, 95, 168, 0.06);
}

.abstract p {
  margin: 0;
  color: var(--white);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* Key-value block for project metadata */
.facts {
  margin: 0 0 26px;
  border-top: 1px solid rgba(22, 35, 63, 0.15);
  border-bottom: 1px solid rgba(22, 35, 63, 0.15);
}

.facts div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(22, 35, 63, 0.09);
  font-size: 0.93rem;
}

.facts div:last-child {
  border-bottom: 0;
}

.facts dt {
  margin: 0;
  color: var(--ink-mute);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75rem;
  padding-top: 2px;
}

.facts dd {
  margin: 0;
  color: var(--text-dim);
  line-height: 1.55;
}

@media (max-width: 620px) {
  .facts div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* Numbered source list */
.sources {
  margin: 0 0 16px;
  padding-left: 22px;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--text-dim);
}

.sources li {
  margin-bottom: 10px;
}

.sources .pub {
  color: var(--ink-mute);
}

.note {
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px solid rgba(22, 35, 63, 0.17);
  border-radius: 3px;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* Figure with caption and source credit */
.paper figure {
  margin: 24px 0;
}

.paper figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(22, 35, 63, 0.17);
  border-radius: 3px;
}

.paper figcaption {
  margin-top: 8px;
  color: var(--ink-mute);
  font-size: 0.85rem;
  line-height: 1.55;
}

.paper figcaption b {
  color: var(--text-dim);
  font-weight: 700;
}

/* ==========================================================================
   FRAMEWORK v2
   Components added for the restructured site. Everything above this line
   carries over from the v1 stylesheet unchanged.
   ========================================================================== */

/* ---------- Placeholder copy ----------
 * Every string still waiting on real text is wrapped in .ph. It renders
 * dimmed with a dashed underline so unfinished copy is obvious on the page
 * and greppable in the source. Remove the class with the text.
 * Count what is left:  grep -ro 'class="ph"' hold | wc -l
 */

.ph {
  color: rgba(29, 95, 168, 0.68);
  border-bottom: 1px dashed rgba(29, 95, 168, 0.4);
  font-style: italic;
}

.ph-num {
  color: rgba(29, 95, 168, 0.68);
  border-bottom: 1px dashed rgba(29, 95, 168, 0.4);
}

/* ---------- Section headers with a trailing link ---------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(22, 35, 63, 0.15);
}

.section-head h2 {
  margin: 0;
}

.section-head .head-link {
  flex-shrink: 0;
  color: var(--blue);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

.section-head .head-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.section-sub {
  margin: -8px 0 24px;
  max-width: 44rem;
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* ---------- Numbers band ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(22, 35, 63, 0.15);
  border-radius: 4px;
  overflow: hidden;
}

.stat {
  background: var(--navy);
  padding: 22px 20px;
}

.section.alt .stat {
  background: var(--navy-deep);
}

.stat-num {
  display: block;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
}

.stat-label {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

@media (max-width: 820px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Team / focus-area cards ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.team-card {
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  border: 1px solid rgba(22, 35, 63, 0.15);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, background 0.18s ease;
}

a.team-card:hover {
  border-color: rgba(29, 95, 168, 0.5);
  background: rgba(29, 95, 168, 0.06);
}

.team-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--white);
}

.team-card p {
  margin: 0;
  flex: 1;
  color: var(--text-dim);
  font-size: 0.94rem;
  line-height: 1.6;
}

.team-card .go {
  margin-top: 16px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--blue);
}

.team-card-meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(22, 35, 63, 0.12);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
}

/* ---------- Two-column split ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
}

.split-points {
  list-style: none;
  margin: 0;
  padding: 0;
}

.split-points li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(22, 35, 63, 0.12);
}

.split-points li:first-child { padding-top: 0; }
.split-points li:last-child { border-bottom: 0; }

.split-points b {
  display: block;
  margin-bottom: 4px;
  font-size: 0.98rem;
  color: var(--white);
}

.split-points span {
  color: var(--text-dim);
  font-size: 0.93rem;
  line-height: 1.6;
}

/* ---------- People ---------- */

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 20px;
}

.person {
  text-decoration: none;
  color: inherit;
  display: block;
}

.person-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  object-fit: cover;
  display: block;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(22, 35, 63, 0.15);
}

.person-photo.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(29, 95, 168, 0.45);
  font-size: 1.5rem;
  font-weight: 700;
}

.person-name {
  margin: 10px 0 2px;
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--white);
}

a.person:hover .person-name {
  color: var(--blue);
}

.person-role {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-mute);
  line-height: 1.45;
}

/* ---------- Recruitment timeline ---------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid rgba(29, 95, 168, 0.3);
}

.timeline li {
  position: relative;
  padding: 0 0 26px 24px;
}

.timeline li:last-child { padding-bottom: 0; }

.timeline li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid var(--blue);
}

.section.alt .timeline li::before { background: var(--navy-deep); }

.timeline-when {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 4px;
}

.timeline-what {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}

.timeline p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.93rem;
  line-height: 1.6;
}

/* ---------- Partner / affiliation row ---------- */

.affil-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.affil {
  padding: 12px 18px;
  border: 1px solid rgba(22, 35, 63, 0.16);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.62);
  font-size: 0.92rem;
  color: var(--text-dim);
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.contact-card {
  padding: 20px;
  border: 1px solid rgba(22, 35, 63, 0.15);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.62);
}

.contact-card h3 {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.contact-card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.97rem;
  line-height: 1.6;
}

.contact-card a {
  color: var(--blue);
  font-weight: 600;
}

/* ---------- Compact hero for interior landing pages ---------- */

.page-head {
  padding: calc(var(--header-h) + 54px) 24px 0;
}

.page-head .section-inner { padding-bottom: 8px; }

.page-head h1 {
  display: block;
  margin: 0 0 12px;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
}

.page-head .lede { max-width: 44rem; }

/* ---------- Project rosters on the People page ---------- */

.roster + .roster {
  margin-top: 34px;
}

.roster .section-head {
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom-color: rgba(22, 35, 63, 0.1);
}

.roster .section-head h3 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* A meta line above the card title needs no rule above it. */
.team-card-meta.lead {
  margin-top: 0;
  margin-bottom: 8px;
  padding-top: 0;
  border-top: 0;
}

/* A roster is a manager plus five analysts, so pin it to six across and
   let it fall back to the auto-fill sizing on narrow screens. */
@media (min-width: 901px) {
  .roster .people-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Inside the 720px paper column the default tile size is too chunky. */
.paper .people-grid {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 14px;
}

.paper .people-grid .person-name { font-size: 0.88rem; }
.paper .people-grid .person-role { font-size: 0.78rem; }

/* The facts block already ends in a rule; the next h2 does not need one. */
.paper .facts + h2 {
  margin-top: 26px;
  padding-top: 0;
  border-top: 0;
}

/* .paper p (0,1,1) outweighs .person-name (0,1,0), so these need the
   element in the selector or the tile captions inherit body spacing. */
.paper .people-grid p.person-name {
  margin: 9px 0 2px;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--white);
}

.paper .people-grid p.person-role {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-mute);
}

/* Manager plus five analysts fits on one line at full width. */
@media (min-width: 761px) {
  .paper .people-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ==========================================================================
   RELIEF OVERRIDES
   Things the dark-to-light conversion above cannot get right on its own:
   the hero, anything that was white-on-navy, and the map textures.
   ========================================================================== */

body {
  background: var(--paper);
  color: var(--ink);
}

/* ---------- Hero: a shaded relief printed on the paper ---------- */

.page {
  background: var(--paper);
}

/* A .page carrying no sheet- class falls back to the contour sheet:
   real isolines off the Blue Ridge DEM, multiplied onto the paper. */
.page::before {
  background:
    url("/assets/img/backgrounds/contours-potomac.webp") center / cover no-repeat,
    var(--paper);
  opacity: 0.55;
  mix-blend-mode: multiply;
}

/* A veil that clears at the top and thickens behind the headline. */
.page::after {
  background: linear-gradient(
    to bottom,
    rgba(243, 241, 233, 0) 0%,
    rgba(243, 241, 233, 0.22) 48%,
    rgba(243, 241, 233, 0.72) 86%,
    rgba(243, 241, 233, 0.9) 100%
  );
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}

.page main { position: relative; }

/* ---------- Brand marks ---------- */

/* Marks are named directly in the markup now. Kept here is only what
   the CSS still has to say about them: the supplied wireframe is unusable
   below about 60px, so the nav and footer use the simplified mark and the
   hero uses the full one. */

.brand-text,
.nav-brand,
.footer-brand span {
  color: var(--ink);
}

/* Social glyphs are white PNGs. brightness(0) keeps the alpha and makes
   the mark solid, which is the only way to recolour a raster here. */
.social img {
  filter: brightness(0) saturate(100%) opacity(0.72);
  transition: filter 0.18s ease;
}

.social:hover img {
  filter: brightness(0) saturate(100%) opacity(1);
}

/* ---------- Buttons ---------- */

.button {
  background: var(--blue);
  color: #ffffff;
  border: 1px solid var(--blue);
}

.button:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: #ffffff;
}

.button.ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
}

.button.ghost:hover {
  background: var(--blue-wash);
  border-color: var(--blue);
  color: var(--blue-deep);
}

.nav-cta {
  background: var(--blue) !important;
  color: #ffffff !important;
}

.nav-cta:hover {
  background: var(--blue-deep) !important;
}

/* ---------- Header and menus ---------- */

.site-header.scrolled,
.site-header.menu-open {
  background: rgba(243, 241, 233, 0.94);
  box-shadow: 0 1px 0 var(--rule), 0 6px 20px rgba(22, 35, 63, 0.07);
}

.nav-links a,
.nav-drop-btn {
  color: var(--ink-soft);
}

.nav-links a:hover,
.nav-drop-btn:hover {
  color: var(--ink);
  background: var(--blue-wash);
}

.nav-links a.active,
.nav-drop-btn.active {
  color: var(--blue);
}

.nav-drop-menu {
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: 0 14px 30px rgba(22, 35, 63, 0.14);
}

@media (max-width: 920px) {
  .nav-links {
    background: rgba(243, 241, 233, 0.98);
    box-shadow: 0 18px 30px rgba(22, 35, 63, 0.12);
  }
}

.nav-toggle {
  background: var(--blue-wash);
}

.nav-toggle span {
  background: var(--ink);
}

.skip-link {
  background: var(--ink);
  color: var(--paper);
}

.scroll-cue {
  color: var(--ink-mute);
}

/* ---------- Sections ---------- */

/* The alt band is a deeper paper with contours showing through. */
.section.alt {
  background: var(--paper-alt);
  position: relative;
  isolation: isolate;
}

.section.alt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.35;
  pointer-events: none;
}

.section h2,
.section h3,
h1 {
  color: var(--ink);
}

.accent {
  color: var(--blue);
}

/* ---------- Cards and surfaces ---------- */

.explore-tile,
.team-card,
.contact-card,
.fact,
.affil,
.work-list a,
.research-card {
  background: var(--surface);
  border-color: var(--rule);
}

.explore-tile:hover,
a.team-card:hover,
.work-list a:hover {
  border-color: var(--blue);
  background: var(--blue-wash);
}

.research-card img,
.detail-img,
.paper figure img,
.person-photo {
  border-color: var(--rule);
}

.stat {
  background: var(--surface);
}

.section.alt .stat {
  background: var(--paper);
}

.stats {
  background: var(--rule);
  border-color: var(--rule);
}

.abstract {
  background: var(--blue-wash);
  border-left-color: var(--blue);
}

.note {
  background: var(--surface);
  border-color: var(--rule);
}

.card-tag,
.chip {
  background: var(--surface);
  border-color: var(--rule-strong);
  color: var(--ink);
}

.chip.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #ffffff;
}

.search-input {
  background: var(--surface);
  border-color: var(--rule-strong);
  color: var(--ink);
}

.back-link {
  background: var(--surface);
  border-color: var(--rule-strong);
  color: var(--ink-soft);
}

.back-link:hover {
  background: var(--blue-wash);
  border-color: var(--blue);
  color: var(--blue-deep);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--paper-alt);
  border-top: 1px solid var(--rule);
}

.footer-links a {
  color: var(--ink-soft);
}

.footer-links a:hover {
  color: var(--blue);
}

.footer-note {
  color: var(--ink-mute);
}

/* ---------- Placeholder copy, restyled for paper ---------- */

.ph,
.ph-num {
  color: var(--blue);
  border-bottom-color: rgba(29, 95, 168, 0.45);
  background: rgba(29, 95, 168, 0.05);
}

/* ---------- Prose links ---------- */

.lede a,
.paper p a,
.paper li a,
.post-article p a,
.section-sub a {
  color: var(--blue);
  text-decoration-color: rgba(29, 95, 168, 0.45);
}

.lede a:hover,
.paper p a:hover,
.paper li a:hover,
.post-article p a:hover,
.section-sub a:hover {
  color: var(--blue-deep);
  background: var(--blue-wash);
  box-shadow: 0 0 0 3px var(--blue-wash);
}

/* Placeholder text sitting inside a filled button needs the inverse
   treatment, otherwise blue-on-blue disappears. */
.button .ph,
.nav-cta .ph {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border-bottom-color: rgba(255, 255, 255, 0.55);
}

.button.ghost .ph {
  color: var(--blue);
  background: rgba(29, 95, 168, 0.05);
  border-bottom-color: rgba(29, 95, 168, 0.45);
}

/* ---------- Independent project blocks on the Directive page ---------- */

.project {
  padding: 46px 24px;
  border-top: 1px solid var(--rule);
}

.project:nth-of-type(even) {
  background: var(--paper-alt);
}

.project-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.project-head h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.project-cycle {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  padding: 4px 10px;
  border: 1px solid rgba(29, 95, 168, 0.35);
  border-radius: 3px;
  background: var(--blue-wash);
  white-space: nowrap;
}

.project-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 30px;
  align-items: start;
}

@media (max-width: 860px) {
  .project-split { grid-template-columns: 1fr; gap: 22px; }
}

.project-figure {
  margin: 0;
}

.project-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--surface);
}

.project-figure figcaption {
  margin-top: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-mute);
}

.project-question {
  margin: 0 0 14px;
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
  color: var(--ink);
}

.project-brief {
  margin: 0 0 16px;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.project-team {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.project-team h3 {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.project .facts {
  margin-bottom: 18px;
  border-color: var(--rule);
}

.project .facts div {
  grid-template-columns: 104px 1fr;
  border-bottom-color: var(--rule-soft);
  padding: 7px 0;
}

@media (min-width: 761px) {
  .project-team .people-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ---------- Leftovers the conversion could not reach ---------- */

/* Map controls: MapLibre chrome was styled for a dark basemap. */
.maplibregl-popup-content {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(22, 35, 63, 0.18);
}

.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: none;
}

.maplibregl-ctrl-attrib,
.maplibregl-ctrl-scale {
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink-soft);
}

/* GIS layer stack: the planes read as translucent sheets over paper. */
.gis-plane {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 14px 30px rgba(22, 35, 63, 0.14);
}

/* The base plane is the Blue Ridge hillshade, which is already greyscale
   and stretched, so it only needs lifting away from the planes above. */
.gis-plane.pl-base img {
  filter: brightness(1.12) contrast(0.86);
}

.layer-swatch {
  border: 1px solid var(--rule);
}

/* Error page */
.error-code {
  color: var(--blue);
}

/* On a phone a six-person roster at two columns costs three rows per
   project. Three columns keeps each team to two. */
@media (max-width: 760px) {
  .project-team .people-grid,
  .roster .people-grid,
  .paper .people-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .project-team .person-name,
  .roster .person-name,
  .paper .people-grid p.person-name {
    font-size: 0.8rem;
  }

  .project-team .person-role,
  .roster .person-role,
  .paper .people-grid p.person-role {
    font-size: 0.72rem;
  }
}

/* ==========================================================================
   EDITORIAL PASS
   Less interface, more page. Everything below either replaces a component
   that read as a template or gets out of the way of the type.
   ========================================================================== */

/* ---------- Type ----------
 * Libre Franklin is a Franklin Gothic revival: newspapers, government
 * documents, map sheets. Self-hosted, so no third-party font request.
 */

body {
  font-family: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

/* Display sizes are set large and light, with leading pulled in tight.
   The size does the emphasis, so the weight does not have to. */
h1,
.page-head h1,
.research-detail h1,
.post-article h1,
.member-head h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.032em;
}

.section h2,
.section-head h2,
.project-head h2 {
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.028em;
}

.section h3,
.explore-tile h3,
.team-card h3 {
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

p,
li {
  font-size: 1.02rem;
  line-height: 1.65;
}

.lede,
.section-sub,
.project-question {
  font-size: 1.24rem;
  line-height: 1.48;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  max-width: 34rem;
}

.paper p,
.post-article p {
  font-size: 1.05rem;
  line-height: 1.68;
}

/* Small caps labels, the way a map sheet sets its marginalia. */
.stat-label,
.facts dt,
.timeline-when,
.contact-card h3,
.team-card-meta,
.roster .section-head h3,
.project-team h3,
.paper h2,
.project-cycle {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ---------- Header: a floating bar, not a band across the top ---------- */

.site-header {
  height: auto;
  top: 14px;
  padding: 0 16px;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav-inner {
  padding: 11px 12px 11px 18px;
  gap: 14px;
  border-radius: 13px;
  border: 1px solid var(--rule);
  background: rgba(252, 251, 247, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 14px rgba(22, 35, 63, 0.07);
}

.site-header.scrolled .nav-inner {
  background: rgba(252, 251, 247, 0.97);
  box-shadow: 0 4px 20px rgba(22, 35, 63, 0.1);
}

/* Name over a quiet subtitle, so the bar carries what the group is without
   a tagline anywhere else. */
.nav-brand {
  align-items: center;
  gap: 11px;
}

.nav-brand img {
  width: 34px;
  height: 34px;
}

.brand-lines {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-lines b {
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* ---------- The lockup, whose first word becomes the section ----------
 * Two lines: the swappable word, then "Maps & Data". On its own line the
 * word can change length without pushing anything sideways, which is the
 * whole reason this is two lines and not one.
 *
 * Both words ship in the markup, stacked in one grid cell so neither
 * reserves space from the other. No script runs: the animation is a
 * keyframe on load, so there is nothing to wait for and nothing to break
 * with JavaScript off.
 */

.brand-name { display: block; }

.brand-swap {
  display: grid;
  /* Room for descenders, taken back as margin so the two lines keep
     their spacing. Without it an overflow clip would cut the g. */
  padding: 0.16em 0;
  margin: -0.16em 0;
}

.brand-swap > span {
  grid-area: 1 / 1;
  display: block;
  min-width: 0;
}

.brand-tail { display: block; }

/* The section word, once it has arrived. */
.bs-b {
  font-style: italic;
  color: var(--cover-blue);
}

/* A page with nothing to swap to has one child and never animates. */
.brand-swap > .bs-b {
  opacity: 0;
}

/* Fade and rise: the old word lifts away, the new one comes up under it.
   The pause before it starts is deliberate. The bar should read as the
   organisation first and only then tell you where you are. */
.brand-swap > .bs-a,
.brand-swap > .bs-b {
  animation-duration: 0.46s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 1.05s;
  animation-fill-mode: both;
}

.brand-swap > .bs-a { animation-name: bs-out; }
.brand-swap > .bs-b { animation-name: bs-in; }

@keyframes bs-out {
  0%   { transform: translateY(0);      opacity: 1; visibility: visible; }
  99%  {                                            visibility: visible; }
  /* Taken out of selection as well as sight: at zero opacity it still
     owns its grid cell, so dragging across the lockup would copy both
     words. visibility steps rather than tweens, which is what is wanted
     at the very end. */
  100% { transform: translateY(-0.5em); opacity: 0; visibility: hidden; }
}

@keyframes bs-in {
  0%   { transform: translateY(0.5em); opacity: 0; }
  60%  { opacity: 0.1; }
  100% { transform: translateY(0);     opacity: 1; }
}

/* Nothing to animate when there is no second word. */
.brand-swap:not(:has(.bs-b)) > .bs-a {
  animation: none;
}

/* Motion off: land on the answer, do not move to get there. */
@media (prefers-reduced-motion: reduce) {
  .brand-swap > .bs-a,
  .brand-swap > .bs-b {
    animation-duration: 1ms;
    animation-delay: 0s;
  }
}

.nav-links a,
.nav-drop-btn {
  font-size: 0.93rem;
  font-weight: 400;
  padding: 8px 12px;
}

.nav-cta {
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.93rem;
  padding: 9px 17px;
}

/* ---------- Hero ----------
 * No headline, no subhead, no button row. A full-bleed sheet, the mark,
 * and a column of marginalia. The argument starts in the next section.
 */

.page {
  min-height: min(86vh, 760px);
  align-items: stretch;
  padding: 0;
}

.page main {
  width: 100%;
  max-width: none;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 60px) 40px 44px;
  text-align: left;
}

.hero-row {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

@media (max-width: 900px) {
  .hero-row { flex-direction: column; align-items: flex-start; gap: 28px; }
  .page main { padding: calc(var(--header-h) + 40px) 22px 34px; }
}

/* ---------- Sections: a rule, a big heading, and room ---------- */

.section {
  padding: 92px 40px;
}

.section-inner {
  width: min(1240px, 100%);
}

.section-inner.narrow { width: min(760px, 100%); }

/* Heading left, body right, the way a spread reads. */
.split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px;
}

.section-head {
  display: block;
  margin-bottom: 34px;
  padding-bottom: 0;
  border-bottom: 0;
  border-top: 1px solid var(--ink);
  padding-top: 18px;
}

.section-head h2 { margin: 0 0 6px; max-width: 18ch; }

.section-head .head-link {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.section-sub { margin: 14px 0 30px; }

/* ---------- Cards, unboxed ---------- */

.explore-band { gap: 0; grid-template-columns: repeat(3, 1fr); }

.explore-tile {
  border: 0;
  border-left: 1px solid var(--rule);
  border-radius: 0;
  background: none !important;
  padding: 4px 30px 0;
}

.explore-tile:first-child { border-left: 0; padding-left: 0; }

.explore-tile:hover { background: none !important; }

.explore-tile h3 { color: var(--ink); margin-bottom: 10px; }
.explore-tile:hover h3 { color: var(--blue); }
.explore-tile p { font-size: 1rem; }
.explore-tile .go { margin-top: 16px; color: var(--blue); font-weight: 600; font-size: 0.9rem; }

.team-grid { gap: 0; }

.team-card {
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  background: none !important;
  padding: 20px 26px 26px 0;
}

a.team-card:hover { background: none !important; }
a.team-card:hover h3 { color: var(--blue); }
.team-card .go { color: var(--blue); }
.team-card-meta { border-top: 0; padding-top: 0; margin-top: 12px; color: var(--ink-mute); }
.team-card-meta.lead { margin-bottom: 10px; }

.contact-card {
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  background: none;
  padding: 18px 0 0;
}

/* ---------- Buttons: rare, and one shape ---------- */

.button {
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.97rem;
  min-height: 44px;
  padding: 11px 22px;
}

/* A section that ends in a row of buttons reads as a landing page. Where
   the action is secondary, it is a link with a rule under it instead. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-weight: 600;
  font-size: 0.97rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(29, 95, 168, 0.4);
  padding-bottom: 2px;
}

.text-link:hover {
  color: var(--blue-deep);
  border-bottom-color: var(--blue-deep);
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 30px;
}

/* ---------- Project blocks ---------- */

.project { padding: 70px 40px; }

.project-head {
  align-items: baseline;
  border-top: 1px solid var(--ink);
  padding-top: 18px;
  margin-bottom: 26px;
}

.project-head h2 { max-width: 20ch; }

.project-cycle {
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink-mute);
}

.project-split { gap: 44px; }

.project-figure img { border-radius: 2px; }

.project-brief { font-size: 1.02rem; line-height: 1.68; }

/* ---------- Paper / long form ---------- */

.paper { width: min(680px, 100%); }

.paper h2 {
  border-top: 1px solid var(--ink);
  color: var(--ink);
  padding-top: 13px;
  margin-top: 44px;
}

.abstract {
  border-left: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  background: none;
  padding: 16px 0 18px;
}

.abstract p { font-size: 1.22rem; line-height: 1.45; font-weight: 400; letter-spacing: -0.012em; }

/* ---------- Footer ---------- */

.site-footer { padding: 56px 40px 44px; background: none; border-top: 1px solid var(--ink); }

.footer-inner { width: min(1240px, 100%); }

.footer-links a { font-weight: 400; font-size: 0.93rem; }

@media (max-width: 760px) {
  .section { padding: 60px 22px; }
  .project { padding: 48px 22px; }
  .site-footer { padding: 40px 22px 34px; }
  .explore-band { grid-template-columns: 1fr; }
  .explore-tile { border-left: 0; border-top: 1px solid var(--rule); padding: 20px 0 0; }
  .explore-tile:first-child { border-top: 0; padding-top: 0; }
}

/* The header floats now, so interior pages need clearance for the pill
   rather than for a flush band. */
.page-head {
  padding-top: calc(var(--header-h) + 74px);
}

/* The closing block was centred while every other section is left
   aligned. One alignment reads as deliberate; two read as a template. */
.cta-panel {
  text-align: left;
}

.cta-panel .lede.centered {
  margin-left: 0;
  margin-right: 0;
}

.cta-panel .buttons,
.cta-panel .socials {
  justify-content: flex-start;
}

.cta-panel h2 {
  max-width: 16ch;
}

.socials { gap: 18px; margin-top: 34px; }
.social { width: 34px; height: 34px; }

/* ---------- Research cards: an image with a caption, not a box ---------- */

.research-cards { gap: 40px 34px; }

.research-card {
  background: none !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.research-card .card-media img {
  border-radius: 2px;
  border: 1px solid var(--rule);
}

.research-card-body { padding: 16px 0 0; }

.research-card h3 {
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: -0.018em;
  margin: 0 0 10px;
}

.research-card h3 a { color: var(--ink); text-decoration: none; }
.research-card:hover h3 a { color: var(--blue); }

/* The genre tag is a control, so it keeps an outline to stay clickable,
   but a quieter one now that nothing around it is boxed. */
.card-tag {
  background: none;
  border-color: var(--rule-strong);
  color: var(--ink-soft);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.card-tag:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- Spacing inside the two-column split ---------- */

.split-points { margin-top: 30px; }
.split-points li { padding: 16px 0; }
.split-points b { font-size: 1.02rem; font-weight: 600; margin-bottom: 5px; }
.split-points span { font-size: 0.98rem; }

.split .lede + .lede { margin-top: 16px; }

/* A slightly stronger relief so the sheet reads as terrain, not texture. */
.page::after { opacity: 0.62; }

/* The .split override above sits after the stacking media query in the
   base sheet, so it has to be restated or the columns never collapse. */
@media (max-width: 880px) {
  .split {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .section-head h2,
  .project-head h2,
  .cta-panel h2 { max-width: none; }

  .lede, .section-sub, .project-question { max-width: none; }
}

/* The menu button was inheriting a dark fill against the light pill. */
.nav-toggle {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--blue-wash) !important;
  border: 1px solid var(--rule);
}

.nav-toggle span { background: var(--ink) !important; width: 18px; }

/* ==========================================================================
   CARTOGRAPHIC BACKGROUNDS
   Greyscale hillshades rendered from real elevation data (AWS Terrain
   Tiles / Mapzen DEM). Real terrain for real places, multiplied onto the
   paper so the warm ground shows through the lit slopes.
   Gallery: _mockups/backgrounds.html
   ========================================================================== */

/* A sheet- class on paper: the relief multiplied straight onto it. The
   cover section below overrides this for the navy hero. */
.page.sheet::before {
  background: var(--sheet) center center / cover no-repeat;
  opacity: 0.6;
  mix-blend-mode: multiply;
  filter: contrast(0.94) brightness(1.02);
}

.page.sheet::after {
  background:
    linear-gradient(
      to bottom,
      rgba(243, 241, 233, 0) 0%,
      rgba(243, 241, 233, 0.24) 44%,
      rgba(243, 241, 233, 0.78) 76%,
      rgba(243, 241, 233, 0.95) 100%
    );
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}

/* The four other places, as greyscale relief. Not in use on any page:
   the banner is an aspect raster now, and swapping it to another place
   means rendering aspect for that place rather than pointing at a
   hillshade. Kept because the gallery still shows them. */
.sheet-taiwan      { --sheet: url("/assets/img/backgrounds/terrain-taiwan-range.webp"); }
.sheet-carpathians { --sheet: url("/assets/img/backgrounds/terrain-carpathians.webp"); }
.sheet-potomac     { --sheet: url("/assets/img/backgrounds/terrain-potomac-blueridge.webp"); }
.sheet-dnipro      { --sheet: url("/assets/img/backgrounds/terrain-dnipro-basin.webp"); }

/* Interior page heads take the contour map rather than the hillshade.
   Line work sits behind a heading without greying it, and it says map
   where a shaded relief says photograph. */
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/img/backgrounds/contours-appalachian.webp") center 28% / cover no-repeat;
  opacity: 0.5;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.3) 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.3) 58%, transparent 100%);
  pointer-events: none;
}

/* Alternating bands: real isolines off the same elevation grid, at a 40m
   interval with every fifth drawn heavier, the way a printed sheet does
   it. This replaces the drawn wave pattern that used to sit here. */
.section.alt::before {
  background: url("/assets/img/backgrounds/contours-appalachian.webp") center / cover no-repeat;
  opacity: 0.34;
  mix-blend-mode: multiply;
}

/* .page-head kept the old 24px gutter while sections moved to 40px. */
.page-head {
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 760px) {
  .page-head { padding-left: 22px; padding-right: 22px; }
}

/* ==========================================================================
   COVER
   The hero now matches the Research Project Ideation cover: deep navy,
   the white wireframe globe, white type, light blue marginalia. Interior
   pages stay on paper, the way the document's inside pages are white.
   ========================================================================== */

:root {
  --cover: #0a192d;
  --cover-soft: #13263f;
  --cover-blue: #78bde4;
}

/* ---------- Hero ---------- */

.page.sheet {
  background: var(--cover);
}

/* The banner carries its own colour now, so it is shown at full strength
   with nothing but the veil over it. Screening a greyscale relief onto
   navy was the old job and would wash this out. */
.page.sheet::before {
  background: var(--sheet) center center / cover no-repeat;
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
}

/* Clear at the top where the terrain is, heavy behind the name. */
.page.sheet::after {
  background: linear-gradient(
    to bottom,
    rgba(10, 25, 45, 0) 32%,
    rgba(10, 25, 45, 0.5) 64%,
    rgba(10, 25, 45, 0.86) 100%
  );
}

/* ---------- The banner rotates ----------
 * One of six aspect colourways per page load. banner-1.js puts a cw-
 * class on <html> before the first paint; the rule below is what shows
 * if that script never runs.
 *
 * Only one image is fetched either way: the colourway decides what URL
 * --sheet holds, and a variable that is never read costs nothing.
 */
.sheet-appalachian  { --sheet: url("/assets/img/backgrounds/aspect-house.webp"); }
.cw-house     .sheet-appalachian { --sheet: url("/assets/img/backgrounds/aspect-house.webp"); }
.cw-twilight  .sheet-appalachian { --sheet: url("/assets/img/backgrounds/aspect-twilight.webp"); }
.cw-duotone   .sheet-appalachian { --sheet: url("/assets/img/backgrounds/aspect-duotone.webp"); }
.cw-muted     .sheet-appalachian { --sheet: url("/assets/img/backgrounds/aspect-muted.webp"); }
.cw-sage      .sheet-appalachian { --sheet: url("/assets/img/backgrounds/aspect-sage.webp"); }
.cw-original  .sheet-appalachian { --sheet: url("/assets/img/backgrounds/aspect-original.webp"); }


.page.sheet main { position: relative; z-index: 1; }

.page.sheet .brand-text { color: #ffffff; }
.page.sheet .scroll-cue { color: rgba(255, 255, 255, 0.5); }

/* Under a tablet, no viewport can resolve the full cut. */
@media (max-width: 900px) {
  .sheet-appalachian  { --sheet: url("/assets/img/backgrounds/aspect-house-sm.webp"); }
  .cw-house     .sheet-appalachian { --sheet: url("/assets/img/backgrounds/aspect-house-sm.webp"); }
  .cw-twilight  .sheet-appalachian { --sheet: url("/assets/img/backgrounds/aspect-twilight-sm.webp"); }
  .cw-duotone   .sheet-appalachian { --sheet: url("/assets/img/backgrounds/aspect-duotone-sm.webp"); }
  .cw-muted     .sheet-appalachian { --sheet: url("/assets/img/backgrounds/aspect-muted-sm.webp"); }
  .cw-sage      .sheet-appalachian { --sheet: url("/assets/img/backgrounds/aspect-sage-sm.webp"); }
  .cw-original  .sheet-appalachian { --sheet: url("/assets/img/backgrounds/aspect-original-sm.webp"); }

}

/* ---------- The bar, always dark ----------
 * It floats over both the navy cover and the paper pages, so pinning it
 * to navy keeps one appearance, and the white wireframe mark stays
 * legible instead of needing an ink copy.
 */

.nav-inner {
  background: rgba(10, 25, 45, 0.92);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 18px rgba(10, 25, 45, 0.22);
}

.site-header.scrolled .nav-inner {
  background: rgba(10, 25, 45, 0.97);
  box-shadow: 0 4px 24px rgba(10, 25, 45, 0.3);
}

.nav-brand img { width: 38px; height: 38px; }
.brand-lines b { color: #ffffff; }
.brand-lines small { color: rgba(255, 255, 255, 0.62); }
.brand-lines .ph {
  color: var(--cover-blue);
  background: rgba(120, 189, 228, 0.12);
  border-bottom-color: rgba(120, 189, 228, 0.5);
}

.nav-links a,
.nav-drop-btn { color: rgba(255, 255, 255, 0.82); }

.nav-links a:hover,
.nav-drop-btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); }

.nav-links a.active,
.nav-drop-btn.active { color: var(--cover-blue); }

.nav-cta {
  background: #ffffff !important;
  color: var(--cover) !important;
}

.nav-cta:hover { background: var(--cover-blue) !important; color: var(--cover) !important; }

.nav-drop-menu {
  background: rgba(10, 25, 45, 0.98);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 34px rgba(10, 25, 45, 0.42);
}

.nav-drop-menu a { color: rgba(255, 255, 255, 0.82); }
.nav-drop-menu a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); }

.nav-toggle {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2);
}
.nav-toggle span { background: #ffffff !important; }

@media (max-width: 920px) {
  .nav-links {
    background: rgba(10, 25, 45, 0.98);
    border-radius: 0 0 13px 13px;
  }
}

/* ---------- Footer, to bookend ---------- */

.site-footer {
  background: var(--cover);
  border-top: 0;
  color: rgba(255, 255, 255, 0.82);
}

.site-footer .footer-brand img { width: 38px; height: 38px; }
.footer-brand span { color: #ffffff !important; }
.footer-links a { color: rgba(255, 255, 255, 0.72); }
.footer-links a:hover { color: var(--cover-blue); }
.footer-note { color: rgba(255, 255, 255, 0.5); }

/* Cover composition: one left column, globe upper right. */
.page.sheet .hero-row { display: block; }

/* The name is the whole cover. It used to sit under an GMD lockup at
   body size; with the initials and the marginalia gone it takes the
   display size itself and wraps to three lines in the left column. */
/* The measure sits on the heading, not the wrapper: ch resolves against
   the element's own font-size, so 15ch on the wrapper would be fifteen
   body characters, not fifteen display ones. */
.hero-name {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #ffffff;
}


@media (max-width: 900px) {
  /* On a phone the name runs to the foot of the cover, so the cue needs
     its own room rather than sitting on the last line. */
  .page.sheet main { padding-bottom: 74px; }
  .page.sheet .scroll-cue { bottom: 18px; }
}

/* ==========================================================================
   19. THE SMALLER SITE
   ==========================================================================

   Four pages carry the site now: home, projects, open problems, join.
   Nothing above this line changed. These are the components the three
   generated pages need, built out of the same vocabulary as the rest:
   paper ground, navy ink, map blue, 4px radii, dashed blue for anything
   not yet written.

   The one new idea is the dashed square. An open problem shows its scope
   as a grid of units; the filled ones are done and the dashed ones are
   not. The same dash that marks unwritten copy marks unmapped ground,
   which is the point of the page.
   -------------------------------------------------------------------- */

/* ---------- Shared helpers ---------- */

.section-inner.centered { text-align: center; }
.link-row.centered { justify-content: center; }

/* The one sentence that says what the group does. Display size, short
   measure, so it reads as a statement rather than a heading. */
.section h2.statement,
.statement {
  margin: 0 0 18px;
  max-width: 26ch;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
}

/* A hero that is only a name tells a first-time reader nothing, and the
   explanation below the fold arrives too late. One line under the name,
   on the cover, white on the terrain. */
.hero-sub {
  margin: 22px 0 0;
  max-width: 34ch;
  font-size: clamp(1.02rem, 1.7vw, 1.3rem);
  line-height: 1.5;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
}

.hero-note {
  margin: 14px 0 0;
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.68);
}

/* ---------- Project entries ----------
 *
 * A project is a question, a one sentence answer, the map, and where the
 * data came from. No card, no box: a rule between entries, because a
 * list of three boxes looks like a directory with two items missing.
 */

.entry {
  padding: 40px 0;
  border-bottom: 1px solid var(--rule);
}

.entry:first-child { padding-top: 8px; }
.entry:last-child { border-bottom: 0; }

/* The title is the question, so it takes the weight of a heading and the
   measure of a sentence. */
.entry .entry-q,
.entry-q {
  margin: 0 0 12px;
  max-width: 30ch;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.entry-a {
  margin: 0 0 26px;
  max-width: 44rem;
  font-size: 1.08rem;
  line-height: 1.62;
  color: var(--ink-soft);
}

.entry-map {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  border: 1px solid var(--rule);
  background: var(--paper-alt);
}

.entry .link-row { margin-top: 18px; }

/* Data, date and who made it. Three labelled rows at small size, so the
   facts are available without competing with the answer. */
.entry-meta {
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  border-top: 1px solid var(--rule-soft);
  padding-top: 16px;
}

.entry-meta div { min-width: 0; }

.entry-meta dt {
  margin: 0 0 4px;
  color: var(--ink-mute);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.entry-meta dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

@media (max-width: 680px) {
  .entry-meta { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- Open problems ---------- */

.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
}

@media (max-width: 900px) {
  .problem-grid { grid-template-columns: 1fr; max-width: 560px; }
}

.problem {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.72);
}

.problem .problem-hook,
.problem-hook {
  margin: 0 0 10px;
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.problem-what {
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.6;
}

/* The unit grid. Width is capped so a 60 square field and a 12 square
   one read at the same scale instead of one filling the card. */
.prog {
  display: block;
  width: 100%;
  max-width: 272px;
  height: auto;
  margin: 0 0 10px;
}

.prog .u-done {
  fill: var(--blue);
  stroke: none;
}

/* Open ground gets the same dash as unwritten copy. */
.prog .u-open {
  fill: rgba(29, 95, 168, 0.05);
  stroke: rgba(29, 95, 168, 0.45);
  stroke-width: 1.2;
  stroke-dasharray: 3 2.6;
}

.problem-progress {
  margin: 0 0 24px;
  color: var(--ink-mute);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.problem-chips-label {
  margin: 0 0 10px;
  color: var(--ink-mute);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

/* Static pills, not controls, so no hover and no link styling. */
.problem-chips {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.problem-chips li {
  padding: 5px 11px;
  border: 1px solid rgba(22, 35, 63, 0.18);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.35;
}

.problem-task {
  margin: 0 0 24px;
  padding: 16px 18px;
  border-left: 2px solid var(--blue);
  background: var(--blue-wash);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.problem-task b {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.problem-task em {
  display: block;
  margin-top: 7px;
  color: var(--ink-mute);
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Initials of whoever is on it, then one dashed empty slot. The empty
   slot is the whole argument of the page, so it is drawn the same way as
   open ground above. */
.problem-who {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.problem-who li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.problem-who .who {
  background: var(--blue);
  color: var(--paper);
}

.problem-who .who-empty {
  border: 1px dashed rgba(29, 95, 168, 0.5);
  background: rgba(29, 95, 168, 0.05);
  color: rgba(29, 95, 168, 0.72);
  font-style: italic;
  font-weight: 600;
}

/* The claim button sits at the foot of every card at the same height,
   whatever the card above it does. */
.problem .entry-meta { margin: 0 0 22px; grid-template-columns: 1fr; }
.problem .button { margin-top: auto; align-self: flex-start; }

/* On the home page a single problem is shown full width rather than in
   the two column grid, so it loses the card and keeps the content. */
.problem-featured {
  padding: 0;
  border: 0;
  background: none;
  margin-top: 24px;
}

.problem.problem-featured .problem-hook {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  max-width: 30ch;
}

.problem-featured .problem-what,
.problem-featured .problem-task { max-width: 44rem; }

/* Four questions sit badly in a row of three. */
.fact-grid.pairs { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 820px) {
  .fact-grid.pairs { grid-template-columns: 1fr; }
}

/* The design system gives every .section h2 a display size. Inside a card
   or an entry the heading is a headline, not a section title, so it takes
   back its own size with one extra class of specificity. */
/* ---------- Pages that are one column of prose ----------
 *
 * /join/ and /learn/ have no page-head band, so they take the floating
 * header's clearance themselves, and their headings sit in a stack
 * rather than one per coloured band. At the system's display size a
 * stacked h2 crowds the paragraph above it, so these take the same
 * smaller heading the research pages already use.
 */

.section.longform {
  padding-top: calc(var(--header-h) + 74px);
}

.section.longform h1 {
  margin: 0 0 16px;
}

.section.longform h2 {
  margin: 56px 0 14px;
  font-size: clamp(1.35rem, 2.3vw, 1.7rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.section.longform .step-list,
.section.longform .fact-grid,
.section.longform .work-list {
  margin-top: 22px;
}

/* A short page used to leave the paper showing below the footer. The
   footer takes up the slack instead. */
body {
  display: flex;
  flex-direction: column;
}

body > .site-footer {
  margin-top: auto;
}

/* ==========================================================================
   20. SPACING FIXES
   ==========================================================================

   Four things measured as wrong rather than noticed as wrong, found by
   walking every page at 1440px and 390px and reading the gap between
   each pair of stacked siblings.
   -------------------------------------------------------------------- */

/* 1. /gis/ laid its heading and its buttons side by side.
 *
 * .page main is a flex box so that a lone .hero-row can bottom-align in
 * the cover. /gis/ puts its heading and its button row straight into
 * main as two separate children, and that same flex row then set them
 * beside each other: the buttons ended up jammed against the full stop
 * of "in layers." and sitting on top of the scroll cue. Measured as a
 * gap of -44px at 1440 and -80px at 390, which is how an overlap looks
 * to a tape measure. Stack them instead.
 *
 * .hero-row keeps its own width and auto side margins, and auto margins
 * still centre a flex item on the cross axis, so the cover pages are
 * laid out exactly as before.
 */
.page main {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

.page main > .hero-row {
  width: min(1240px, 100%);
}

/* 2. A filled button needs more air above it than a text link does.
 *
 * .link-row was built for the underlined "go somewhere" links, and 30px
 * suits those. The home page puts the join button in one, where 30px
 * above and the section's 92px below read as a button that has slipped
 * up into the paragraph.
 */
.link-row:has(.button) {
  margin-top: 38px;
}

.section.longform .buttons {
  margin-top: 36px;
}

/* 3. The last project in the list trailed off.
 *
 * Every .entry carries 40px of bottom padding to sit off the rule under
 * it. The last one has no rule, so that padding lands on top of the
 * section's own 92px and the list ends in 132px of nothing while every
 * other band on the page ends in 92px.
 */
.entry:last-child {
  padding-bottom: 0;
}

/* 4. A section heading sat too close to the map under it.
 *
 * .section h2 leaves 14px under itself, which is right before a
 * paragraph and tight before a 750px tall image. On the home page that
 * put "The most recent map" 22px off the top of the map.
 */
.section h2 + .entry {
  padding-top: 24px;
}

/* 5. The cover's buttons centred themselves under a left-aligned
 *    headline, and on a phone the second one landed on the scroll cue.
 *
 * On a small screen .button takes width: min(100%, 330px) for a decent
 * touch target, so a button and a text link cannot share a line and
 * wrap into two. Centred, that put "Start using it" in the middle of
 * the column with the cue's chevron on top of its underline.
 */
.page main > .buttons {
  justify-content: flex-start;
  width: 100%;
}

@media (max-width: 900px) {
  /* The clearance that keeps the cue off the last line was only ever
     given to .page.sheet, the home and error covers. /gis/ is a .page
     with a cue and no sheet, so it never got any. */
  .page:not(.sheet):has(.scroll-cue) main {
    padding-bottom: 86px;
  }
}