/* Home page: the Teams row (a .story-teaser it shares with the row layout used elsewhere) carries
   a bleed teams-table photo on the right per docs/design/photo-language.md: a plain edge-to-edge
   rectangle filling its own grid column, no radius, no scrim, no caption; the teaser copy beside it
   narrates directly (variant:'bleed' on the photoSlot call supplies the flat, unrounded frame).
   Scoped under body.photo-hero. photoCard()'s shared-team-memory card (docs/design/
   photo-treatments.md section 3) floats bottom-left, since the scene's focal (100% 30%) weights
   the group toward the right, leaving bottom-left the emptiest quadrant. position:relative anchors
   it; the card's own CSS (experience.css) handles its box, position class and the <900px static
   fallback beneath the photo. */
body.photo-hero .teams-teaser-photo {
  position: relative;
}
body.photo-hero .teams-teaser-photo .photo {
  width: 100%;
  overflow: hidden;
}

@media (max-width: 700px) {
  body.photo-hero .teams-teaser {
    row-gap: 28px;
  }
}

/* Between 900px and 1300px the .story-teaser grid is still two columns (.9fr/1.1fr) but the photo
   column has narrowed enough that the shared-team-memory card's copy wraps to three lines instead
   of two (verified: card height jumps from ~147px to ~166px right at the 1300px viewport width
   where the wrap resolves back to two lines), growing the card tall enough to reach the top third
   of the frame and cover the leftmost teammate's face. The shared .photo-card fallback in
   experience.css only fires below 900px, so this instance switches to the same static, full-width,
   below-photo treatment across the whole band where the extra wrapped line causes the overlap. */
@media (max-width: 1300px) and (min-width: 901px) {
  body.photo-hero .teams-teaser-photo .photo-card {
    position: static;
    width: 100%;
    margin-top: 24px;
    box-shadow: 0 12px 32px #2021240b;
  }
}

/* The hero's recalled-memory card on narrow screens. Below 900px the shared component hides it, so
   the opening kept a large photograph and lost the one thing that makes the proposition concrete.
   The mobile hero already lays the photograph out in normal flow below the copy, so this only has to
   stop being an absolutely positioned overlay: same element, same content, no duplicate markup, so
   the two layouts cannot drift. The desktop floating treatment above 900px is untouched. */
@media (max-width: 900px) {
  body.photo-hero .hero-memory {
    display: block;
    position: static;
    width: auto;
    max-width: 420px;
    margin: 28px 0 0;
    transform: none;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  }
}

/* The four sample-memory controls and the motion toggle sit at 40px. The review singled these out as
   worth 44px while explicitly leaving ordinary prose links alone. */
body.photo-hero .demo-buttons button,
body.photo-hero .motion-toggle {
  min-height: 44px;
}

/* The story teaser now carries a real excerpt rather than a second invented scenario, so it also
   carries the four real source tags as its provenance row. They are stored values, not prose. */
body.photo-hero .story-excerpt .source-row span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: -0.02em;
}