/* JOY'S BOX V40 — mobile milestones: full-view editorial cards.
   Goal: remove dead space on phones and make each chapter feel intentional,
   large and immersive without changing the desktop composition. */
:root{--v40-gold:#d4b35c;--v40-paper:#f3eee3;--v40-ease:cubic-bezier(.16,1,.3,1)}

@media(max-width:900px){
  html.v40-story .story-v2{
    padding-top:58px!important;
    padding-bottom:0!important;
    background:var(--v40-paper)!important;
  }

  /* The intro stays readable, but no oversized gap before the visual chapter. */
  html.v40-story .story-v2 .story__head{
    padding:0 16px!important;
    gap:14px!important;
  }
  html.v40-story .story-v2 .story__head .section-kicker{
    font-size:7px!important;
    letter-spacing:.17em!important;
  }
  html.v40-story .story-v2 .story__head .headline{
    max-width:8.7ch!important;
    font-size:clamp(48px,13vw,66px)!important;
    line-height:.86!important;
    letter-spacing:-.045em!important;
  }
  html.v40-story .story-v2 .story__head>p{
    max-width:38em!important;
    margin-top:1px!important;
    color:#6a655d!important;
    font-size:10.5px!important;
    line-height:1.58!important;
  }

  html.v40-story .v35-story-slot{
    margin-top:14px!important;
  }

  /* The sticky scene now uses almost all of the visual viewport. */
  html.v40-story .story-v2 .story-pin{
    position:sticky!important;
    top:0!important;
    height:100svh!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    overflow:hidden!important;
    background:var(--v40-paper)!important;
    isolation:isolate!important;
  }

  /* V39 added a second heading and note around the card. They duplicated the
     information already inside the card and were the main source of empty space. */
  html.v40-story .story-mobile-stagehead,
  html.v40-story .story-mobile-note{
    display:none!important;
  }

  html.v40-story .story-v2 .story-track{
    position:absolute!important;
    z-index:3!important;
    top:max(76px,calc(env(safe-area-inset-top) + 64px))!important;
    left:0!important;
    display:flex!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    gap:10px!important;
    padding:0 12px!important;
    align-items:stretch!important;
    overflow:visible!important;
    transform:translate3d(var(--v35-story-x,0px),0,0)!important;
    will-change:transform!important;
  }

  html.v40-story .story-frame{
    position:relative!important;
    flex:0 0 calc(100vw - 24px)!important;
    width:calc(100vw - 24px)!important;
    height:calc(100svh - max(98px,calc(env(safe-area-inset-top) + 86px)))!important;
    min-height:0!important;
    max-height:760px!important;
    aspect-ratio:auto!important;
    border-radius:25px!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.18)!important;
    box-shadow:0 24px 62px rgba(28,23,15,.18)!important;
    transform-origin:center center!important;
    transition:opacity .32s ease,filter .32s ease,transform .46s var(--v40-ease),box-shadow .4s ease!important;
  }
  html.v40-story .story-frame.is-active{
    opacity:1!important;
    transform:scale(1)!important;
    filter:none!important;
    box-shadow:0 30px 72px rgba(28,23,15,.23)!important;
  }
  html.v40-story .story-frame:not(.is-active){
    opacity:.46!important;
    transform:scale(.985)!important;
    filter:saturate(.76) brightness(.82)!important;
  }
  html.v40-story .story-frame::after{
    border-radius:25px!important;
    border-color:rgba(255,255,255,.12)!important;
  }

  html.v40-story .story-frame__media,
  html.v40-story .story-frame__media img{
    width:100%!important;
    height:100%!important;
  }
  html.v40-story .story-frame__media img{
    object-fit:cover!important;
    object-position:center center!important;
    transform:scale(var(--v35-story-img-scale,1.035)) translate3d(var(--v35-story-img-x,0px),0,0)!important;
  }
  html.v40-story .story-frame.is-active .story-frame__media img{
    --v35-story-img-scale:1.005!important;
  }
  html.v40-story .story-frame__shade{
    background:
      linear-gradient(180deg,rgba(2,2,2,.18) 0%,rgba(2,2,2,.01) 34%,rgba(2,2,2,.10) 52%,rgba(2,2,2,.90) 100%),
      linear-gradient(90deg,rgba(0,0,0,.18),transparent 62%)!important;
  }

  html.v40-story .story-frame__top{
    left:20px!important;
    right:20px!important;
    top:20px!important;
    font-size:6.5px!important;
    line-height:1!important;
    letter-spacing:.17em!important;
    opacity:.98!important;
  }
  html.v40-story .story-frame__top span:first-child{
    color:#ead078!important;
  }

  /* Larger editorial typography: the chapter is now the focus, not a small card
     floating in a full-screen pin. */
  html.v40-story .story-frame__copy{
    left:20px!important;
    right:20px!important;
    bottom:66px!important;
    display:block!important;
  }
  html.v40-story .story-frame__copy>strong{
    display:block!important;
    margin:0 0 22px!important;
    font-size:clamp(92px,25.5vw,118px)!important;
    line-height:.60!important;
    letter-spacing:-.06em!important;
    white-space:nowrap!important;
  }
  html.v40-story .story-frame[data-year="2023-2024"] .story-frame__copy>strong{
    font-size:clamp(66px,19vw,86px)!important;
    letter-spacing:-.045em!important;
  }
  html.v40-story .story-frame__copy>div{
    position:relative!important;
    max-width:88%!important;
    padding-top:14px!important;
    border-top:1px solid rgba(255,255,255,.30)!important;
  }
  html.v40-story .story-frame__copy small{
    margin:0 0 8px!important;
    color:#e6c86f!important;
    font-size:6px!important;
    line-height:1!important;
    letter-spacing:.19em!important;
  }
  html.v40-story .story-frame__copy h3{
    margin:0!important;
    max-width:12ch!important;
    font-size:clamp(32px,9vw,43px)!important;
    line-height:.80!important;
    letter-spacing:-.028em!important;
  }
  html.v40-story .story-frame[data-year="2026"] .story-frame__copy h3{
    max-width:14ch!important;
    font-size:clamp(28px,8vw,38px)!important;
  }
  html.v40-story .story-frame__note{
    display:none!important;
  }

  /* Progress now sits on the visual itself, rather than underneath it in an
     otherwise empty strip. */
  html.v40-story .story-progress{
    display:grid!important;
    position:absolute!important;
    z-index:12!important;
    left:30px!important;
    right:30px!important;
    top:auto!important;
    bottom:max(30px,calc(env(safe-area-inset-bottom) + 18px))!important;
    grid-template-columns:auto 1fr auto!important;
    align-items:center!important;
    gap:11px!important;
    color:rgba(255,255,255,.90)!important;
    font:700 7px/1 var(--sans)!important;
    letter-spacing:.15em!important;
    pointer-events:none!important;
    text-shadow:0 1px 10px rgba(0,0,0,.25)!important;
  }
  html.v40-story .story-progress i{
    display:block!important;
    height:1px!important;
    background:rgba(255,255,255,.28)!important;
    overflow:hidden!important;
  }
  html.v40-story .story-progress i b{
    display:block!important;
    width:100%!important;
    height:100%!important;
    background:#e3c66f!important;
    transform:scaleX(var(--v35-story-meter,.25))!important;
    transform-origin:left center!important;
  }

  /* Compact-height phones: preserve the same full-view feel while protecting copy. */
  @media(max-height:720px){
    html.v40-story .story-v2 .story-track{
      top:max(68px,calc(env(safe-area-inset-top) + 58px))!important;
    }
    html.v40-story .story-frame{
      height:calc(100svh - max(86px,calc(env(safe-area-inset-top) + 76px)))!important;
      border-radius:22px!important;
    }
    html.v40-story .story-frame__top{left:17px!important;right:17px!important;top:17px!important}
    html.v40-story .story-frame__copy{left:17px!important;right:17px!important;bottom:56px!important}
    html.v40-story .story-frame__copy>strong{font-size:clamp(78px,23vw,102px)!important;margin-bottom:17px!important}
    html.v40-story .story-frame[data-year="2023-2024"] .story-frame__copy>strong{font-size:clamp(58px,17.5vw,76px)!important}
    html.v40-story .story-frame__copy h3{font-size:clamp(28px,8.2vw,38px)!important}
    html.v40-story .story-progress{left:27px!important;right:27px!important;bottom:max(24px,calc(env(safe-area-inset-bottom) + 14px))!important}
  }

  @media(max-width:360px){
    html.v40-story .story-v2 .story-track{gap:8px!important;padding-left:10px!important;padding-right:10px!important}
    html.v40-story .story-frame{flex-basis:calc(100vw - 20px)!important;width:calc(100vw - 20px)!important;border-radius:21px!important}
    html.v40-story .story-frame__top,
    html.v40-story .story-frame__copy{left:17px!important;right:17px!important}
    html.v40-story .story-progress{left:25px!important;right:25px!important}
  }
}

@media(max-width:900px) and (prefers-reduced-motion:reduce){
  html.v40-story .story-frame{transition:none!important}
}