/* Distinct topic imagery. Readable objects and copy occupy separate areas. */
.story-mobile-figure { display:none; }
.camera-window { position:relative; overflow:hidden; isolation:isolate; }
.camera-bridge { position:absolute; inset:0; z-index:2; opacity:0; pointer-events:none; }
.camera-window img { transform-origin:center; }
.camera-bridge img { aspect-ratio:4/3; object-fit:cover; object-position:65% center; }
.story-mobile-figure .camera-overview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:65% center; }
.story-layer { transform-origin:75% 50%; }
.story-plate {
  position:absolute; right:var(--gutter); top:50%; width:53vw; max-width:960px;
  margin:0; transform:translateY(-46%); background:#101820;
}
.story-plate img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; object-position:center; }
.story-plate figcaption { font-size:11px; color:#bdc7cc; margin-top:14px; line-height:1.6; letter-spacing:.02em; }
.scene-cover .story-plate { inset:0; width:100%; max-width:none; transform:none; }
.scene-cover .story-plate img { height:100%; object-fit:cover; object-position:70% 50%; aspect-ratio:auto; }
.scene-cover .story-plate::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,#101820f5 0%,#101820d9 24%,#1018206b 47%,transparent 72%),linear-gradient(0deg,#101820db,transparent 22%);
}
.scene-cover .story-plate figcaption { position:absolute; z-index:1; bottom:20px; right:var(--gutter); }
.story-chapter .story-copy { max-width:min(39vw,460px); }
.story-chapter { min-height:86svh; }
@media (min-width: 761px) and (max-height: 760px) {
  .story-plate { width:min(51vw,76vh); }
  .scene-cover .story-plate { width:100%; }
}
@media (min-width:761px) and (max-width:1000px) {
  .story-plate { width:50vw; right:24px; }
  .field-story .story-chapter h2,.english-v2026 .field-story .story-chapter h2 { font-size:36px; }
  .story-chapter .story-lead { font-size:16px; }
  .story-chapter .story-copy { max-width:39vw; }
}
@media (max-width:760px) {
  .story-stage { display:none; }
  .story-content { margin-top:0; }
  .story-intro,.story-chapter {
    display:block; min-height:0; padding:28px 0 48px;
    scroll-margin-top:calc(var(--story-header) + var(--story-nav));
  }
  .story-chapter { border-top:1px solid #2e3a43; }
  .story-mobile-figure {
    display:block; margin:0 0 24px; overflow:hidden;
    background:#101820;
  }
  .story-mobile-figure img {
    display:block; width:100%; height:auto; aspect-ratio:4/3;
    object-fit:contain; object-position:center; transform-origin:center;
  }
  .story-mobile-figure.scene-cover img,.story-mobile-figure.scene-workspace img,
  .story-mobile-figure.scene-visibility img { aspect-ratio:16/10; }
  .story-mobile-figure figcaption { font-size:10px; color:#a7b5be; line-height:1.6; padding-top:10px; }
  .story-chapter .story-copy { max-width:100%; }
  .story-eyebrow { margin-bottom:12px; }
  .story-intro .story-eyebrow { margin-bottom:16px; }
  .story-chapter .story-lead { margin-bottom:16px; }
  .story-chapter .story-points { margin-bottom:16px; }
  .story-intro .story-discipline { margin-bottom:12px; }
  .story-intro .story-lead { margin-bottom:16px; }
  .story-chapter .story-case-link { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) {
  .story-mobile-figure img,.story-plate img { transform:none !important; }
  .camera-overview,.camera-bridge { display:none !important; }
}

/* Keep both cover routes within a short phone's first screen. */
@media (max-width: 760px) {
  .story-intro { padding-top: 18px; }
  .story-intro .story-mobile-figure { margin-bottom: 16px; }
  .story-intro .story-mobile-figure img { height: clamp(132px, 24svh, 200px); aspect-ratio: auto; object-fit: contain; }
  .story-intro .story-mobile-figure figcaption { padding-top: 6px; }
  .story-intro .story-eyebrow { margin-bottom: 10px; }
  .story-intro .story-copy { display: flex; flex-direction: column; }
  .story-intro .story-lead { order: 2; }
  .story-intro .story-actions { order: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 20px; }
  .story-intro .story-actions a { min-height: 48px; box-sizing: border-box; margin: 0; padding: 10px 8px; justify-content: center; gap: 10px; font-size: 13px; line-height: 1.4; }
}

@media (max-width: 760px) and (max-height: 640px) {
  .story-intro .story-mobile-figure img { height: 132px; }
}