/*
 * Story canonical geometry and readability contract v1.2.1.
 * Loaded after Global Shell + NC UI. Header and finale remain owned by their
 * canonical components; this file owns only shared Story geometry/readability.
 */

body.ncde-storytelling-page{
  margin:0!important;
  min-height:100dvh;
  overflow-x:hidden;
  font-family:var(--nc-ui-font,"Afacad Flux","Segoe UI",Arial,sans-serif);
}

body.ncde-storytelling-page .site-after-gateway{
  min-height:0!important;
  background:transparent!important;
}

/* Keep the compact Story header out of document flow from first paint. */
body.ncde-storytelling-page .site-after-gateway > .nc-global-header{
  position:fixed;
  right:0;
  left:0;
}

body.ncde-storytelling-page .ncde-story-document,
body.ncde-storytelling-page .ncde-cinematic-document{
  margin:0!important;
  padding:0!important;
  background:#031b14!important;
}

/* The film stage belongs to the viewport, not to the remaining sticky range.
   The director still uses the tall story section as its time axis, while the
   rendered stage remains geometrically stable through Chapters 01–05. */
body.ncde-storytelling-page .ncs3--video-engine .ncs3__stage{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

/* Prevent focusable cinematic controls from creating a retained internal
   scroll offset inside the fixed Chapter 04 viewport. */
body.ncde-storytelling-page :where(.ncs4,.ncs4__layout){
  overflow:hidden!important;
  overflow:clip!important;
  overscroll-behavior:none!important;
}

/* Skip is a Story control, not ordinary document content. */
body.ncde-storytelling-page .nc-story-skip{
  position:fixed!important;
  z-index:9180!important;
  top:max(35px,calc(env(safe-area-inset-top) + 27px))!important;
  right:clamp(14px,2.4vw,30px)!important;
  min-height:46px!important;
  padding:0 18px!important;
  border:1px solid rgba(235,204,126,.42)!important;
  border-radius:999px!important;
  background:rgba(3,35,27,.78)!important;
  color:#fff7e6!important;
  box-shadow:0 14px 34px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.1)!important;
  -webkit-backdrop-filter:blur(16px) saturate(120%)!important;
  backdrop-filter:blur(16px) saturate(120%)!important;
  font:720 max(14px,.875rem)/1 var(--nc-ui-font,"Afacad Flux",sans-serif)!important;
  letter-spacing:.04em!important;
  cursor:pointer!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease!important;
}
body.ncde-storytelling-page .nc-story-skip:hover,
body.ncde-storytelling-page .nc-story-skip:focus-visible{
  border-color:rgba(244,212,126,.76)!important;
  background:rgba(4,51,39,.9)!important;
  transform:translateY(-2px)!important;
  outline:none!important;
}
body.ncde-storytelling-page .nc-story-skip:active{transform:scale(.97)!important}
body.ncde-storytelling-page .nc-story-skip[hidden]{display:none!important}
body.ncde-storytelling-page.ncde-story-handoff-active .nc-story-skip{display:none!important}

/* Full dynamic viewport on desktop and tablet. Mobile keeps its proven crop. */
@media(min-width:761px){
  body.ncde-storytelling-page .ncs3--video-engine .ncs3__stage{
    top:0!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  body.ncde-storytelling-page .ncs3--video-engine .ncs3__media{
    position:absolute!important;
    inset:-2px!important;
    width:calc(100% + 4px)!important;
    height:calc(100% + 4px)!important;
    min-width:calc(100% + 4px)!important;
    min-height:calc(100% + 4px)!important;
    overflow:hidden!important;
    contain:paint;
  }
  body.ncde-storytelling-page .ncs3--video-engine :where(.ncs3__video,.ncs3__hold),
  body.ncde-storytelling-page :where(.ncs4__table-video,.ncs4__transition-video){
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    transform:translateZ(0) scale(1.004)!important;
  }
}

/* Protected copy zone for Chapter 04: opposite the focused photograph. */
body.ncde-storytelling-page .ncs4__lower-third{
  width:min(590px,calc(100vw - 48px))!important;
  padding:clamp(14px,1.8vw,20px) clamp(16px,2.2vw,24px)!important;
  border:1px solid rgba(231,201,128,.24)!important;
  border-radius:20px!important;
  background:linear-gradient(135deg,rgba(3,25,19,.9),rgba(8,39,30,.84))!important;
  box-shadow:0 18px 54px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.08)!important;
  backdrop-filter:blur(18px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(120%)!important;
}
body.ncde-storytelling-page .ncs4__lower-third.is-top{top:max(112px,14vh)!important}
body.ncde-storytelling-page .ncs4__lower-third.is-bottom{bottom:max(28px,5vh)!important}
body.ncde-storytelling-page .ncs4__lower-third.is-left{
  left:clamp(30px,5vw,78px)!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  text-align:left!important;
  transform:translateY(calc(-50% + 14px))!important;
}
body.ncde-storytelling-page .ncs4__lower-third.is-left[aria-hidden="false"]{transform:translateY(-50%)!important}
body.ncde-storytelling-page .ncs4__lower-third.is-right{
  left:auto!important;
  right:clamp(30px,5vw,78px)!important;
  top:50%!important;
  bottom:auto!important;
  text-align:left!important;
  transform:translateY(calc(-50% + 14px))!important;
}
body.ncde-storytelling-page .ncs4__lower-third.is-right[aria-hidden="false"]{transform:translateY(-50%)!important}
body.ncde-storytelling-page .ncs4__lower-third-index,
body.ncde-storytelling-page .ncs4__lower-third small{
  font-family:var(--nc-ui-font,"Afacad Flux",sans-serif)!important;
  font-size:max(13px,.8125rem)!important;
  line-height:1.35!important;
}
body.ncde-storytelling-page .ncs4__lower-third strong{
  font-family:var(--nc-ui-font,"Afacad Flux",sans-serif)!important;
  font-size:clamp(1.5rem,2.35vw,2.35rem)!important;
  font-weight:620!important;
  line-height:1.08!important;
}
body.ncde-storytelling-page .ncs4__lower-third p{
  max-width:48ch!important;
  margin:.7rem auto 0!important;
  color:rgba(244,248,246,.86)!important;
  font:430 clamp(1rem,1.15vw,1.08rem)/1.52 var(--nc-ui-font,"Afacad Flux",sans-serif)!important;
}
body.ncde-storytelling-page .ncs4__layout:is(.is-video-revealing,.is-video-complete):not(.is-static-focus) .ncs4__lower-third{
  opacity:0!important;
  visibility:hidden!important;
}

@media(max-width:760px){
  body.ncde-storytelling-page .nc-story-skip{
    top:max(28px,calc(env(safe-area-inset-top) + 20px))!important;
    right:12px!important;
    min-height:44px!important;
    padding:0 15px!important;
    font-size:14px!important;
  }
  body.ncde-storytelling-page .ncs4__lower-third{
    width:calc(100vw - 28px)!important;
    padding:13px 15px!important;
    border-radius:17px!important;
  }
  body.ncde-storytelling-page .ncs4__lower-third.is-top{top:max(92px,calc(env(safe-area-inset-top) + 80px))!important}
  body.ncde-storytelling-page .ncs4__lower-third.is-bottom{bottom:max(16px,env(safe-area-inset-bottom))!important}
  body.ncde-storytelling-page .ncs4__lower-third:is(.is-left,.is-right){
    left:14px!important;
    right:14px!important;
    top:auto!important;
    bottom:max(16px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    transform:translateY(14px)!important;
  }
  body.ncde-storytelling-page .ncs4__lower-third:is(.is-left,.is-right)[aria-hidden="false"]{transform:none!important}
  body.ncde-storytelling-page .ncs4__lower-third strong{font-size:clamp(1.28rem,5.5vw,1.62rem)!important}
  body.ncde-storytelling-page .ncs4__lower-third p{font-size:15px!important;line-height:1.46!important}
}

@media(prefers-reduced-transparency:reduce){
  body.ncde-storytelling-page .nc-story-skip{
    background:#06271e!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  body.ncde-storytelling-page .ncs4__lower-third{
    background:#06271e!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}