: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; }
}