.jh-home-hero {
  position: relative;
  min-height: 93.5svh;
  color: #fff;
  background: #14110d;
  overflow: clip;
}

.jh-home-hero__media,
.jh-home-hero__overlay {
  position: absolute;
  inset: 0;
}

.jh-home-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
  /* Paired with HERO_FADE_MS in john-home-clean.js — the carousel waits exactly this
     long between fading out and swapping the src. Cut from 0.6s when the auto-advance
     came down to 2s (John, 2026-08-05): at 600ms out + 600ms in the hero was in
     transition for more of each cycle than it was settled. */
  transition: opacity 0.32s ease;
}

.jh-home-hero__overlay {
  background:
    linear-gradient(180deg, rgba(8, 8, 8, 0.14), rgba(8, 8, 8, 0.66)),
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.04), transparent 35%);
}

.jh-home-hero__content {
  position: relative;
  z-index: 1;
  width: min(var(--jh-max), calc(100% - 40px));
  min-height: 93.5svh;
  margin: 0 auto;
  display: grid;
  align-items: end;
  justify-items: center;
  text-align: center;
  padding-bottom: clamp(72px, 10vh, 132px);
}

.jh-home-hero__inner {
  width: min(900px, 100%);
}

.jh-home-hero__subtitle {
  margin: 20px auto 0;
  max-width: 760px;
  font-family: var(--jh-font-display);
  font-size: clamp(1.2rem, 0.96rem + 0.8vw, 2rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.92;
}

.jh-home-hero__cta {
  display: inline-block;
  margin-top: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.72);
  padding-bottom: 6px;
  font-family: var(--jh-font-display);
  font-size: 0.94rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.jh-home-hero__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.jh-home-hero__dot {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.jh-home-hero__dot.is-active {
  background: #fff;
}

/* Carousel prev/next arrows (injected by john-home-clean.js). */
.jh-home-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(12, 12, 12, 0.28);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.jh-home-hero__nav:hover {
  background: rgba(12, 12, 12, 0.5);
  border-color: #fff;
}
.jh-home-hero__nav--prev { left: clamp(12px, 3vw, 40px); }
.jh-home-hero__nav--next { right: clamp(12px, 3vw, 40px); }

@media (prefers-reduced-motion: reduce) {
  .jh-home-hero__media img { transition: none; }
}
@media (max-width: 720px) {
  /* On touch screens swipe + dots drive the carousel; the arrows would crowd the frame. */
  .jh-home-hero__nav { display: none; }
}

.jh-home-flow-clean {
  display: grid;
  gap: 24px;
  padding: 24px 0 72px;
}

.jh-home-block {
  width: min(var(--jh-max), calc(100% - 40px));
  margin: 0 auto;
  background: rgba(255, 251, 244, 0.88);
  border: 1px solid var(--jh-line);
  box-shadow: var(--jh-shadow);
  padding: 28px;
}

.jh-home-map-clean {
  height: 520px;
  min-height: 100%;
}

.jh-home-map-clean .leaflet-container {
  width: 100%;
  height: 100%;
}

.jh-home-map-clean .jh-safaris-region-label__inner {
  padding: 10px 18px;
}

.jh-home-map-feature {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
  gap: 24px;
  align-items: center;
}

.jh-home-map-feature__copy {
  display: grid;
  align-content: center;
  gap: 14px;
  min-height: 360px;
}

.jh-home-map-feature .jh-home-map-clean {
  height: 360px;
  min-height: 360px;
}

.jh-home-map-fallback {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 18px 34px rgba(17, 17, 17, 0.12);
  background: #d8d0c2;
}

.jh-home-map-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 15, 15, 0.02), rgba(15, 15, 15, 0.34)),
    radial-gradient(circle at 22% 28%, rgba(255, 255, 255, 0.18), transparent 22%);
  pointer-events: none;
}

.jh-home-map-fallback__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.jh-home-map-fallback__cover {
  position: absolute;
  inset: 0;
  display: block;
}

.jh-home-map-fallback__label,
.jh-home-map-fallback__value {
  position: absolute;
  left: 22px;
  z-index: 1;
  color: #fff;
  font-family: var(--jh-font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.jh-home-map-fallback__label {
  top: 22px;
  font-size: 0.78rem;
}

.jh-home-map-fallback__value {
  bottom: 22px;
  font-size: clamp(1.8rem, 1.45rem + 0.7vw, 2.7rem);
  line-height: 1;
}

.jh-home-map-clean .leaflet-marker-icon.jh-map-location,
.jh-home-map-clean .jh-map-location {
  width: 34px !important;
  height: 34px !important;
  background: transparent;
  border: 0;
}

.jh-home-map-clean .jh-map-location__inner {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255, 252, 246, 0.92);
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.16);
  position: relative;
}

.jh-home-map-clean .jh-map-location__inner img {
  display: block;
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jh-home-map-clean .jh-map-location__count {
  display: none;
}

.jh-home-map-feature .jh-home-tree-clean__stat-link {
  justify-self: start;
  width: auto;
}

.jh-home-tree-clean {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.jh-home-tree-clean__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 320px;
}

.jh-home-tree-clean__copy {
  display: grid;
  gap: 14px;
}

.jh-home-tree-clean__title {
  margin: 0;
  font-family: var(--jh-font-display);
  font-size: clamp(2.1rem, 1.7rem + 1vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.jh-home-tree-clean__meta {
  margin: 0;
  color: rgba(24, 19, 14, 0.72);
  font-family: var(--jh-font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.jh-home-tree-clean__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.jh-home-tree-clean__stats span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(23, 21, 17, 0.12);
  border-radius: 999px;
  background: rgba(255, 251, 244, 0.8);
  font-family: var(--jh-font-display);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jh-home-tree-clean__stat-link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(23, 21, 17, 0.12);
  border-radius: 999px;
  background: rgba(255, 251, 244, 0.8);
  font-family: var(--jh-font-display);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jh-home-tree-clean__summary {
  margin: 0;
  max-width: 62ch;
  line-height: 1.78;
  color: rgba(24, 19, 14, 0.82);
}

/* Same box as the Location panel's map (.jh-home-map-feature .jh-home-map-clean:
   fixed 360px height, fills its grid column) — John, 2026-08-05, so every homepage
   photo panel (Safari, Tree of Life, About) reads as one consistent strip rather
   than the previous mix of a square 360x360 crop here against a wide landscape map
   above it. width: 100% fills whichever column this card's DOM order puts it in;
   see :first-child below for the photo-LEFT case. */
.jh-home-tree-clean__media {
  display: block;
  width: 100%;
  height: 360px;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 18px 34px rgba(17, 17, 17, 0.12);
}

/* A photo-LEFT card (media before copy in the DOM) needs no separate rule any more:
   width is already 100% of whichever column the box lands in, so there is nothing
   left to re-justify now that the box is full-width rather than a right-aligned
   square. The old :first-child override that did that justification is gone. */

.jh-home-tree-clean__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Story-strand cards (Evo Devo · Zoology · Paleo) reuse the Tree-of-Life card. When a node
   has no thumbnail the card drops to a single column; the story headline sits under the meta. */
.jh-home-tree-clean__card--noimg {
  grid-template-columns: 1fr;
}

.jh-home-strand__headline {
  margin: 0;
  font-style: italic;
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
  line-height: 1.4;
  color: rgba(24, 19, 14, 0.78);
}

/* Offline-only homepage panels (Evo Devo · Paleo). Hidden by default so they never
   ship on the deployed site; serve_local's top view-mode toggle reveals them in Offline
   view by setting html.jh-mode-offline (and hides them again in Online view) — live,
   no reload. */
.jh-home-block--offline {
  display: none;
}

html.jh-mode-offline .jh-home-block--offline {
  display: block;
}

/* Wildlife panel — a grid of the safaris' hero animals, each linking to its Tree-of-Life
   node (/evolution?node=<key>). */
.jh-home-wildlife__head {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

.jh-home-wildlife__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.jh-home-wildlife__item {
  display: grid;
  gap: 10px;
  align-content: start;
  text-decoration: none;
  color: inherit;
}

.jh-home-wildlife__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: #e7e0d4;
  box-shadow: 0 10px 22px rgba(17, 17, 17, 0.12);
}

.jh-home-wildlife__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.jh-home-wildlife__item:hover .jh-home-wildlife__thumb img {
  transform: scale(1.05);
}

.jh-home-wildlife__name {
  font-family: var(--jh-font-display);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(24, 19, 14, 0.86);
}

@media (max-width: 860px) {
  /* NOT height:420px here (that was tried and is dead code — the unconditional,
     more-specific `.jh-home-map-feature .jh-home-map-clean { height: 360px }` at line
     ~171 always wins regardless of this media query, since a media query gates
     applicability but adds no specificity of its own). The map is genuinely 360px at
     every width, so the photo panels below match it at every width too rather than
     introducing a second, inconsistent mobile height (John, 2026-08-05: same box as
     the map everywhere). */
  .jh-home-map-feature {
    grid-template-columns: 1fr;
  }

  .jh-home-tree-clean__card {
    grid-template-columns: 1fr;
  }

  .jh-home-tree-clean__media {
    width: 100%;
  }

  .jh-home-hero,
  .jh-home-hero__content {
    min-height: 85svh;
  }
}