.about-hero {
  aspect-ratio: 390 / 700;
}

@media (min-width: 1024px) {
  .about-hero {
    aspect-ratio: 1728 / 1117;
  }
}

.our-story {
  background: var(--color-cream);
  color: var(--color-olive);
  padding: var(--space-xl) var(--space-section-x);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.our-story__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-section-title);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.our-story__body {
  font-size: var(--fs-body);
  line-height: 1.5;
  max-width: 56rem;
}

@media (min-width: 1024px) {
  .our-story {
    align-items: center;
    text-align: center;
  }
}

/* Garden / Land / Sea */
.characters {
  background: var(--color-cream);
  padding: 0 var(--space-section-x) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.characters__track {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.characters__track::-webkit-scrollbar {
  display: none;
}

.character-card {
  flex: 0 0 auto;
  width: 100%;
  scroll-snap-align: start;
  border: 1px solid var(--color-olive);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-sm) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
}

.character-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1.6rem + 2vw, 4.5rem);
  color: var(--color-olive);
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.character-card__subtitle {
  font-size: var(--fs-eyebrow);
  color: var(--color-olive);
  transition: color 0.3s ease;
}

.character-card__image {
  /* Was 80% with a 20rem cap — fills the card's own content width now
     instead of leaving a visible margin on either side. */
  width: 100%;
  /* The three source illustrations aren't drawn at the same aspect ratio
     (garden/land are tall-ish, sea is notably wider/shorter) — at a plain
     width:100% that meant sea.png rendered ~120px shorter than the
     others, so cards were different heights even with nothing hovered.
     A fixed ratio makes every card's image box the same size regardless
     of its source shape (3:2, not a square — a square read too tall next
     to the body copy). Sea's own crop (~1.61:1) is a little wider than
     this box, so contain still letterboxes it slightly top/bottom, but
     only a few percent, not the large gap a full square left. */
  aspect-ratio: 3 / 2;
  /* The source PNGs have been cropped to their real content bounding box
     (see about/*.png), so contain no longer leaves the large dead-space
     margins it used to on the untouched files — it just letterboxes the
     small gap between each illustration's own aspect ratio and the
     square box, keeping the whole drawing visible with nothing cropped. */
  object-fit: contain;
  object-position: center;
  /* Explicit auto margins, not reliance on the parent's align-items —
     at desktop .character-card switches to align-items: stretch (needed
     so the card itself can grow on hover), and a flex child with its own
     explicit width doesn't get centered by stretch the way it does by
     align-items: center — it falls back to the start edge instead, which
     was leaving this left-aligned rather than centered. */
  margin: var(--space-sm) auto;
}

/* Collapsed by default at desktop (see the hover rule below) — the
   grid-rows 0fr/1fr trick lets this animate open to its natural content
   height instead of a hard display:none/block cut. On mobile there's no
   hover at all, so this stays permanently at 1fr (see the mobile rule). */
.character-card__reveal {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  transition: grid-template-rows 0.35s ease;
}

.character-card__body {
  min-height: 0;
  overflow: hidden;
  font-size: var(--fs-value);
  line-height: 1.5;
  color: var(--color-olive);
}

/* Mobile-only — signals the track scrolls to 3 cards (one full-width card
   visible at a time otherwise gives no hint there's more). Desktop shows
   all three side by side, so there's nothing to paginate there. */
.characters__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--color-olive);
}

.characters__pagination button {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.characters__pagination img {
  width: 100%;
}

.characters__pagination .rotate-180 {
  transform: rotate(180deg);
}

@media (min-width: 1024px) {
  .characters__track {
    overflow: visible;
    /* Was the flex default (stretch) — with nothing else set, every card
       stretched to match its tallest sibling's height, so hovering one
       open also visually inflated the other two (empty space at their
       bottom, and it read as more than one card expanding at once) even
       though only the hovered card's own content had actually grown. */
    align-items: flex-start;
  }

  .character-card {
    flex: 1 1 0;
    padding: var(--space-lg) var(--space-md) 0;
    align-items: stretch;
    /* Figma (node 506:1897/1889/1905): hover fills the card olive, growing
       ~200px taller as the reveal opens below the illustration. */
    background: transparent;
    transition: background-color 0.35s ease, border-color 0.35s ease;
  }

  .character-card__reveal {
    /* Collapsed until hover — see the shared rule above for the mechanism.
       minmax(0, 0fr), not bare 0fr: without the explicit 0 floor, a plain
       0fr row can still partly follow its content's own intrinsic
       (min-content) height in some cases — here that showed up as cards
       with longer body copy staying visibly taller than short ones even
       at rest, nothing hovered. */
    grid-template-rows: minmax(0, 0fr);
  }

  .character-card__body {
    padding: var(--space-sm) 0;
    opacity: 0;
    color: var(--color-cream);
    transition: opacity 0.2s ease;
  }

  .character-card:hover {
    background: var(--color-olive);
    border-color: var(--color-olive);
  }

  .character-card:hover .character-card__title,
  .character-card:hover .character-card__subtitle {
    color: var(--color-cream);
  }

  .character-card:hover .character-card__image {
    mix-blend-mode: luminosity;
  }

  .character-card:hover .character-card__reveal {
    grid-template-rows: 1fr;
  }

  .character-card:hover .character-card__body {
    opacity: 1;
    transition: opacity 0.25s ease 0.1s;
  }

  .characters__pagination {
    display: none;
  }
}

/* Two-up promo grid (About links to both locations) */
.promo-grid {
  background: var(--color-cream);
  padding: var(--space-sm) var(--space-section-x) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 1024px) {
  .promo-grid {
    flex-direction: row;
  }

  .promo-grid .promo-card {
    flex: 1;
    min-width: 0;
  }
}