/* Native sticky keeps every chapter available, including short app viewports. */
.page-story .founder-opening { padding-block: clamp(54px, 7vw, 100px) clamp(66px, 7vw, 108px); }
.page-story .founder-opening h1 { font: 800 clamp(76px, 14.2vw, 194px)/.9 var(--font-family); letter-spacing: -.025em; }
.page-story .founder-opening-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-top: 34px; }
.page-story .founder-opening-name { font-size: 22px; font-weight: 600; letter-spacing: .08em; }
.page-story .founder-opening-bottom .body-copy { font-size: 17px; line-height: 1.9; }
.story-chapters { --story-cut: clamp(24px, 3vw, 44px); position: relative; isolation: isolate; }
.story-chapter { --story-focus: 50% 40%; position: relative; background: var(--paper); scroll-margin-top: var(--header); }
.story-chapter-konan, .story-chapter-uci { --story-focus: 70% 40%; }
.story-chapter-hayate { --story-focus: 62% 40%; }
.story-chapter-mariners { --story-focus: 63% 44%; }
.story-image { position: relative; overflow: hidden; background: #243447; }
.story-image picture { display: block; }
.story-image img { display: block; width: 100%; height: auto; object-position: var(--story-focus); }
.story-shot figcaption { padding: 14px var(--gutter); background: #eee; color: #505963; font-size: 14px; font-weight: 500; line-height: 1.7; }
.story-chapter-copy { max-width: 760px; padding: 40px var(--gutter) 76px; }
.story-chapter-era { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; font-weight: 600; letter-spacing: .06em; line-height: 1.6; }
.story-chapter-era span { letter-spacing: .1em; }
.story-chapter-copy h2 { margin-top: 18px; font: 800 clamp(54px, 7.2vw, 104px)/.94 var(--font-family); letter-spacing: -.015em; }
.story-chapter-description { margin-top: 24px; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.85; overflow-wrap: break-word; text-wrap: pretty; }
.story-chapters [data-pixel-static] { opacity: 1; }
.page-story .founder-next { position: relative; z-index: 2; padding-block: clamp(84px, 10vw, 144px); background: #e3e3e3; color: var(--ink); }
.page-story .founder-next::before { background: inherit; }
.page-story .founder-next h2 { font-size: clamp(30px, 4.6vw, 64px); line-height: 1.5; letter-spacing: -.04em; }
.page-story .founder-next .body-copy { margin-top: 30px; }
.page-story .founder-next .press-button { margin-top: 32px; }
/* Keep the footer's existing diagonal above the preceding gray section. */
.page-story .site-footer { z-index: 3; }

/* The slanted upper edge travels up naturally and rests above the viewport. */
@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .story-chapters[data-story-mode="stacked"]::after { content: ''; display: block; height: var(--story-tail, 80px); background: #eee; }
  .story-chapters[data-story-mode="stacked"] .story-chapter {
    position: sticky; top: calc(-1 * var(--story-cut) - var(--story-viewport-shift, 0px));
    height: calc(var(--story-card-height, var(--story-height, var(--fvh, 1vh) * 100)) + var(--story-cut));
    clip-path: polygon(0 var(--story-cut), 100% 0, 100% 100%, 0 100%);
    scroll-margin-top: calc(-1 * (var(--header) + 26px + var(--story-cut) + var(--story-anchor-shift, 0px)));
  }
  .story-chapters[data-story-mode="stacked"] .story-chapter + .story-chapter { margin-top: var(--story-gap, var(--story-hold, 140px)); }
  .story-chapters[data-story-mode="stacked"] .story-chapter:nth-child(even) { clip-path: polygon(0 0, 100% var(--story-cut), 100% 100%, 0 100%); }
  .story-chapters[data-story-mode="stacked"] .story-shot { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
  .story-chapters[data-story-mode="stacked"] .story-image { min-height: 0; }
  .story-chapters[data-story-mode="stacked"] .story-image picture { position: absolute; inset: 0; }
  .story-chapters[data-story-mode="stacked"] .story-image img { width: 100%; height: 100%; object-fit: cover; transform: translateY(calc(var(--story-photo-shift, 0px) + var(--story-pan, 0px))) scale(1.045); }
  .story-chapters[data-story-mode="stacked"] .story-chapter.is-story-active .story-image img { will-change: transform; }
  .story-chapters[data-story-mode="stacked"] .story-image::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, #081a30de 0%, #081a3099 35%, #081a3014 70%), linear-gradient(0deg, #081a30bf, transparent 58%);
  }
  .story-chapters[data-story-mode="stacked"] .story-chapter-copy {
    position: absolute; z-index: 1; left: var(--gutter);
    bottom: calc(var(--story-caption-height, 52px) + clamp(34px, 5vw, 70px));
    width: min(47%, 580px); max-width: none; padding: 0; color: #fff; text-shadow: 0 1px 8px #081a3080;
  }
  .story-chapters[data-story-mode="stacked"] .has-story-copy-backdrop .story-chapter-copy::before {
    content: ''; position: absolute; z-index: -1; inset: -8px -12px;
    background: #081a30cc; box-shadow: 0 0 28px 18px #081a30cc; pointer-events: none;
  }
  /* Draw the next diagonal inside its section, below the complete photo caption. */
  .story-chapters[data-story-mode="stacked"] + .founder-next {
    background: linear-gradient(to bottom, #eee 0 var(--cut), #e3e3e3 var(--cut) 100%);
  }
  .story-chapters[data-story-mode="stacked"] + .founder-next::before { top: 0; background: #e3e3e3; }
}
@media (min-width: 801px) {
  .story-chapter-ottawa { --story-focus: 50% 0%; }
}
@media (max-width: 800px) {
  .page-story .founder-opening { padding-block: 50px 68px; }
  .page-story .founder-opening-bottom { align-items: flex-start; flex-direction: column; gap: 22px; }
  .page-story .founder-opening h1 { font-size: clamp(74px, 17.8vw, 128px); }
  .story-chapter-copy { padding-block: 32px 62px; }
  .story-chapter-copy h2 { font-size: clamp(48px, 10vw, 76px); }
  .story-chapter-description { font-size: 16px; line-height: 1.85; }
  .story-chapters[data-story-mode="stacked"] .story-chapter-copy { width: calc(100% - 2 * var(--gutter)); bottom: calc(var(--story-caption-height, 52px) + 28px); }
  .story-chapters[data-story-mode="stacked"] .story-image::after { background: linear-gradient(0deg, #081a30f2 0%, #081a30bd 24%, #081a3026 48%, transparent 64%); }
}
@media (max-aspect-ratio: 1/1) {
  .story-chapter-konan { --story-focus: 47% 30%; }
  .story-chapter-uci { --story-focus: 50% 37%; }
}
@media (max-width: 520px) {
  .page-story .founder-opening h1 { font-size: 19.5vw; }
  .page-story .founder-opening-name { font-size: 20px; }
  .page-story .founder-opening-bottom .body-copy { font-size: 16px; }
  .story-chapter-era { font-size: 12px; gap: 7px 16px; }
  .story-chapter-copy h2 { font-size: clamp(43px, 12.8vw, 62px); margin-top: 13px; }
  .story-chapter-description { margin-top: 20px; font-size: 15px; line-height: 1.9; }
}
@media print {
  .story-chapters[data-story-mode] { padding-bottom: 0; }
  .story-chapters[data-story-mode] .story-chapter { position: relative; height: auto; margin: 0; clip-path: none; break-inside: avoid; }
  .story-chapters[data-story-mode] .story-shot { display: block; height: auto; }
  .story-chapters[data-story-mode] .story-image picture { position: static; }
  .story-chapters[data-story-mode] .story-image img { height: auto; max-height: 65vh; transform: none; object-fit: contain; }
  .story-chapters[data-story-mode] .story-image::after { content: none; }
  .story-chapters[data-story-mode] .story-chapter-copy { position: relative; left: auto; bottom: auto; width: auto; padding: 20px var(--gutter) 36px; color: var(--ink); text-shadow: none; }
}