/* The public explanation shares Home's type, color and editorial framing.
   Shared navigation owns each outer frame; this sheet owns its artwork and skin. */
body.public-site.how-story-page {
  --paper: #fff;
  --ink: #071a27;
  --deep: #071a27;
  --blue: #0864e8;
  --blue-deep: #0864e8;
  --blue-light: #bad8f6;
  --wash: #eaf3fc;
  --wash-deep: #dcecff;
  --muted: #526779;
  --line: #c9d6e2;
  --focus: #0864e8;
  background: var(--paper);
  color: var(--ink);
}

body.public-site.how-story-page #main .narrow-cover.narrow-cover--story-v3 {
  --tile-background: var(--paper);
  --tile-foreground: var(--ink);
  --tile-muted: var(--muted);
  --tile-accent: var(--blue);
  --wide-story-accent: var(--tile-accent);
  --wide-story-muted: var(--tile-muted);
  --story-body-size: var(--type-body);
  --story-body-line: 1.5;
  background: var(--tile-background);
  color: var(--tile-foreground);
  overflow: visible;
}

body.public-site.how-story-page #main .narrow-cover--story-v3.narrow-cover--problem {
  --tile-background: var(--deep);
  --tile-foreground: #fff;
  --tile-muted: #dbe7f0;
  --tile-accent: var(--blue-light);
}

body.public-site.how-story-page #main .narrow-cover--story-v3:is(.narrow-cover--physical-limits, .narrow-cover--mementom-key) {
  --tile-background: var(--wash);
}


body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__live-copy {
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: none;
  grid-area: auto;
  align-self: start;
  padding: 0;
  color: var(--tile-foreground);
}

body.public-site.how-story-page #main .narrow-cover--story-v3 :is(h1, h2) {
  max-width: none;
  margin: 0;
  color: var(--tile-foreground);
  font-family: var(--type-family);
  font-size: clamp(1.85rem, min(4.6vw, 4.5dvh), 3rem);
  font-weight: var(--type-heading-weight);
  line-height: var(--type-heading-line);
  letter-spacing: var(--type-heading-tracking);
  text-align: left;
  text-transform: none;
  text-wrap: balance;
}

body.public-site.how-story-page #main .narrow-cover--story-v3 p.narrow-cover__live-kicker {
  margin: 0;
  color: var(--tile-accent);
  font-size: var(--type-label);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: var(--type-label-tracking);
  text-align: left;
}

body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__live-summary {
  display: grid;
  max-width: none;
  gap: .7em;
  margin-top: clamp(.85rem, 2dvh, 1.5rem);
  color: var(--tile-muted);
  font-size: clamp(1rem, 2.15dvh, var(--type-body));
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-wrap: pretty;
}

body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__live-summary :is(p, ol) {
  margin-block: 0;
}

body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__art-window {
  position: relative;
  grid-area: auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: .75rem;
  background: transparent;
  box-shadow: none;
}

/* These key/lock scenes explain physical relationships: retain the complete
   artwork, centered horizontally and aligned to the top of its frame. */
body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__precise-art,
body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__problem-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  margin-inline: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center top;
}

body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__problem-intro {
  width: 100%;
  max-width: none;
  min-height: 0;
}

body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__problem-intro h2 {
  max-width: none;
  margin-inline: 0;
  color: var(--tile-foreground);
  font-size: clamp(1.85rem, min(4.6vw, 4.5dvh), 3rem);
  line-height: 1.12;
  letter-spacing: var(--type-heading-tracking);
  text-align: left;
}

body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__problem-grid {
  display: grid;
  height: 100%;
  align-self: stretch;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-height: 0;
  padding: 0;
  gap: 1rem;
}

body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__problem-group {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(4rem, 1fr);
  align-content: stretch;
  min-height: 0;
  padding: 0;
  gap: .5rem;
  border: 0;
}

body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__problem-copy h3 {
  font-size: var(--type-subheading);
  font-weight: var(--type-heading-weight);
  line-height: 1.2;
  letter-spacing: -.025em;
  white-space: normal;
  text-wrap: balance;
}

body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__problem-copy p {
  margin-top: .6rem;
  color: var(--tile-muted);
  font-size: clamp(1rem, 2.15dvh, var(--type-body));
  line-height: 1.45;
}

body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__problem-art {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__problem-art img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

body.public-site.how-story-page #main .narrow-cover--mementom-key .narrow-cover__art-window {
  display: grid;
  grid-template-rows: minmax(6rem, 1fr) auto;
  align-self: stretch;
  gap: .75rem;
}

body.public-site.how-story-page #main .narrow-cover--mementom-key .narrow-cover__key-visual {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
}

body.public-site.how-story-page #main .narrow-cover--mementom-key .narrow-cover__key-creation {
  position: static;
  width: 100%;
  max-width: 34rem;
  padding: 0;
  margin-inline: auto;
  gap: .6rem;
  color: var(--tile-foreground);
}

body.public-site.how-story-page #main .narrow-cover--mementom-key .narrow-cover__key-creation p {
  max-width: 36ch;
  color: var(--tile-muted);
  font-size: var(--type-small);
  line-height: 1.4;
}

body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__story-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1rem;
}

body.public-site.how-story-page :is(.narrow-cover__story-button, .button--primary) {
  min-height: 48px;
  padding: .7rem 1.25rem;
  border: 2px solid transparent;
  border-radius: .65rem;
  background: var(--blue);
  color: #fff;
  font: 700 1rem/1.4 var(--type-family);
}

body.public-site.how-story-page #main .narrow-cover__story-link {
  min-height: 44px;
  border: 0;
  color: var(--blue);
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: .2em;
}

body.public-site.how-story-page main :is(a, button):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

body.public-site.how-story-page .site-footer { background: #fff; border-color: var(--line); }

body.public-site.how-story-page .value-story {
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  align-content: start;
  align-items: start;
  gap: 1rem;
  padding-block: clamp(1rem, 3dvh, 2.5rem);
  background: var(--deep);
}
body.public-site.how-story-page .value-story__intro h2 {
  max-width: none;
  font-size: clamp(1.85rem, min(4.6vw, 4.5dvh), 3rem);
  line-height: var(--type-heading-line);
}
body.public-site.how-story-page .value-story__intro > p:last-child {
  margin-top: 1rem;
  color: #dbe7f0;
  font-size: clamp(1rem, 2.15dvh, var(--type-body));
  line-height: 1.45;
}
body.public-site.how-story-page .value-story > * { width: min(100%, 44rem); margin-inline: auto; }
body.public-site.how-story-page .value-story .value-tabs { margin-block: 0; }
body.public-site.how-story-page .value-tabs__list { border-radius: .65rem .65rem 0 0; overflow: hidden; }
body.public-site.how-story-page .value-tabs__list button { min-height: 48px; padding: .6rem .75rem; font-size: 1rem; color: #dbe7f0; }
body.public-site.how-story-page .value-tabs__list button[aria-selected="true"] { background: var(--blue); color: #fff; }
body.public-site.how-story-page .value-tabs__panel { padding: 1rem 1.25rem; border-radius: 0 0 .65rem .65rem; }
body.public-site.how-story-page .value-tabs__panel h3 { max-width: none; margin-bottom: .6rem; font-size: var(--type-subheading); line-height: 1.2; }
body.public-site.how-story-page .value-tabs__panel li { padding: .7rem 0; }
body.public-site.how-story-page .value-tabs__panel li strong { margin-bottom: .25rem; color: var(--ink); font-size: 1.125rem; line-height: 1.25; }
body.public-site.how-story-page .value-tabs__panel li span { font-size: 1rem; line-height: 1.4; }

/* Both renderers keep the narrow narrative order at every viewport width. */
body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__live-kicker--section { display: none; }
body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__live-kicker--inline { display: block; margin-bottom: .65rem; }
body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__problem-grid::before { display: none; }
body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__problem-copy { max-width: none; }
body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__problem-copy p { max-width: none; }

@media (max-width: 899px) {
  body.public-site.how-story-page #main .narrow-cover--story-v3 .narrow-cover__live-summary { margin-top: .85rem; gap: .6em; font-size: clamp(1rem, 2.15dvh, var(--type-body)); line-height: 1.45; }
  body.public-site.how-story-page #main .narrow-cover--physical-limits .narrow-cover__problem-copy h3 { font-size: 1.25rem; }
  body.public-site.how-story-page #main .narrow-cover--physical-limits .narrow-cover__problem-copy p { margin-top: .4rem; font-size: 1rem; }
  body.public-site.how-story-page .value-story { padding: 1rem clamp(1.25rem, 4vw, 2rem); }
  body.public-site.how-story-page .value-tabs__panel { padding: .85rem 1rem; }
  body.public-site.how-story-page .value-tabs__panel li { padding: .6rem 0; }
}

/* Height remains fluid: shorter windows yield image space before readable
   copy, while min-content allows oversized content to continue naturally. */