/* One measured viewport and one top-aligned frame for the public stories.
   story-viewport.js publishes these dimensions; the values here are the
   no-script fallback. Page styles own colors, type and artwork internals. */
:root:has(.story-viewport-page) {
  --story-header-height: 88px;
  --story-slide-height: calc(100dvh - var(--story-header-height));
  --narrow-stop: var(--story-slide-height);
  --story-frame-space: clamp(1rem, 3dvh, 2rem);
  --story-frame-gap: clamp(.75rem, 2dvh, 1.5rem);
  --story-media-min: 8rem;
  scroll-padding-top: var(--story-header-height);
}
/* The shared gesture controller owns overview scrolling. Do not let legacy
   wide/narrow CSS snapping or native smooth scrolling start a second motion. */
html:has(body.story-viewport-page:not(.narrow-detail-open)) {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}
.story-viewport-page .site-header { position: sticky; top: 0; }
.story-viewport-page .app-return { min-height: var(--story-slide-height); }

/* Copy takes its natural height at the top; media fills the remaining row.
   min-content is the readable fallback when the complete stack cannot fit. */
body.public-site.story-viewport-page #main :is(.story-frame:not(.narrow-cover), .story-frame > .narrow-cover__viewport-canvas) {
  display: grid;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--story-frame-rows, auto minmax(var(--story-media-min), 1fr));
  align-items: start;
  align-content: start;
  gap: var(--story-frame-gap);
  height: var(--story-slide-height);
  min-height: min-content;
  max-height: none;
  padding-block: var(--story-frame-space);
  overflow: visible;
}
body.public-site.story-viewport-page #main :is(.story-frame__copy, .audience-hero__copy, .journey-step__copy) {
  min-width: 0;
  align-self: start;
}
body.public-site.story-viewport-page #main :is(.story-photo, .story-frame > .audience-hero__image, .story-frame > .journey-step__media) {
  width: 100%;
  height: 100%;
  min-height: var(--story-media-min);
  max-height: none;
  margin: 0;
  align-self: stretch;
  aspect-ratio: auto;
}
.story-frame--with-footer { --story-frame-rows: auto minmax(var(--story-media-min), 1fr) auto; }

/* Home retains its timeline rail and exact copy. Only actual extra rows get
   an extra track, so the company results slide has no empty footer row. */
.audience-site--overview {
  --journey-space: var(--story-frame-space);
  --journey-gap: var(--story-frame-gap);
}
.audience-site--overview .audience-hero { --story-media-min: 10rem; }
.audience-site--overview .journey-step--first { --story-frame-rows: auto auto minmax(var(--story-media-min), 1fr); }
.audience-site--overview .journey-step:has(> .journey-note) { --story-frame-rows: auto minmax(var(--story-media-min), 1fr) auto; }
.audience-site--overview .journey-step:has(> .key-photo-example) { --story-media-min: 19rem; }
body.public-site.story-viewport-page #main .story-frame:is(.journey-step--overflow, .audience-hero--overflow) {
  height: auto;
  min-height: var(--story-slide-height);
}
body.public-site.story-viewport-page #main :is(.journey-step--overflow > .journey-step__media, .audience-hero--overflow > .audience-hero__image) {
  height: clamp(var(--story-media-min), 35dvh, 24rem);
}
.audience-site--overview .audience-introduction { height: var(--story-slide-height); }
.audience-site--overview .audience-introduction--overflow { height: auto; min-height: var(--story-slide-height); }
.audience-site--overview .journey-closing__hero { height: var(--story-slide-height); }
.audience-site--overview .overview-continuity { min-height: var(--story-slide-height); }

/* Story's photographs keep their accepted editorial minimum. All text is a
   single copy group, followed by the photograph and any closing actions. */
body.public-site.our-story-page #main .story-frame {
  width: 100%;
  max-width: var(--story-frame-width);
  margin: 0 auto;
  padding-inline: var(--story-frame-inset);
}

/* How keeps the existing live key artwork intact inside the same frame.
   The article is a stop wrapper; its canvas is the copy/media grid. */
body.public-site.how-story-page #main .narrow-cover.story-frame {
  --story-media-min: 10rem;
  height: auto;
  min-height: var(--story-slide-height);
  max-height: none;
}
body.public-site.how-story-page #main .narrow-cover--mementom-key.story-frame { --story-media-min: 15rem; }
body.public-site.how-story-page #main .story-frame > .narrow-cover__viewport-canvas {
  width: min(100%, 52rem);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
body.public-site.how-story-page #main .story-frame .narrow-cover__art-window {
  height: 100%;
  min-height: 0;
  max-height: none;
  align-self: stretch;
}
body.public-site.how-story-page.wide-story-ready #why {
  min-height: var(--story-slide-height);
  align-content: start;
}