/* JOY'S BOX V39 — rebuilt mobile milestones composition.
   Scope: mobile story only. Desktop remains exactly as before. */
:root{--v39-gold:#d4b35c;--v39-ink:#141412;--v39-paper:#f3eee3;--v39-ease:cubic-bezier(.16,1,.3,1)}
.story-mobile-stagehead,.story-mobile-note{display:none}

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

  html.v39-story .story-v2 .story__head{
    padding:0 20px!important;
    gap:16px!important;
  }
  html.v39-story .story-v2 .story__head .section-kicker{
    font-size:8px!important;
    letter-spacing:.18em!important;
  }
  html.v39-story .story-v2 .story__head .headline{
    max-width:9.5ch!important;
    font-size:clamp(50px,13.6vw,68px)!important;
    line-height:.87!important;
    letter-spacing:-.045em!important;
  }
  html.v39-story .story-v2 .story__head>p{
    max-width:34em!important;
    color:#666157!important;
    font-size:11px!important;
    line-height:1.7!important;
  }

  /* Keep the vertical page scroll / horizontal timeline behaviour, but compose
     the sticky viewport as one intentional editorial block instead of centring
     a short card inside a full blank screen. */
  html.v39-story .v35-story-slot{
    margin-top:26px!important;
  }
  html.v39-story .story-v2 .story-pin{
    position:sticky!important;
    top:0!important;
    height:100svh!important;
    min-height:620px!important;
    display:block!important;
    overflow:hidden!important;
    padding:0!important;
    background:var(--v39-paper)!important;
  }

  html.v39-story .story-mobile-stagehead{
    display:flex!important;
    position:absolute!important;
    z-index:10!important;
    top:max(88px,calc(env(safe-area-inset-top) + 68px))!important;
    left:20px!important;
    right:20px!important;
    align-items:center!important;
    justify-content:space-between!important;
    color:#6d675e!important;
    font:700 7px/1 var(--sans)!important;
    letter-spacing:.18em!important;
    pointer-events:none!important;
  }
  html.v39-story .story-mobile-stagehead span:first-child{
    color:var(--v39-gold)!important;
  }

  html.v39-story .story-v2 .story-track{
    position:absolute!important;
    z-index:3!important;
    top:max(122px,calc(env(safe-area-inset-top) + 102px))!important;
    left:0!important;
    display:flex!important;
    width:max-content!important;
    min-width:max-content!important;
    gap:14px!important;
    padding:0 20px!important;
    align-items:stretch!important;
    transform:translate3d(var(--v35-story-x,0px),0,0)!important;
    will-change:transform!important;
  }

  html.v39-story .story-frame{
    flex:0 0 89vw!important;
    width:89vw!important;
    height:clamp(430px,57svh,560px)!important;
    min-height:430px!important;
    max-height:560px!important;
    aspect-ratio:auto!important;
    border-radius:28px!important;
    overflow:hidden!important;
    box-shadow:0 24px 64px rgba(35,28,17,.16)!important;
    border:1px solid rgba(255,255,255,.22)!important;
    transform-origin:center center!important;
  }
  html.v39-story .story-frame:not(.is-active){
    opacity:.24!important;
    transform:scale(.965)!important;
    filter:saturate(.68) brightness(.76)!important;
  }
  html.v39-story .story-frame.is-active{
    opacity:1!important;
    transform:scale(1)!important;
    filter:none!important;
    box-shadow:0 30px 74px rgba(35,28,17,.22)!important;
  }
  html.v39-story .story-frame::after{
    border-radius:28px!important;
    border-color:rgba(255,255,255,.14)!important;
  }
  html.v39-story .story-frame__media img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:scale(var(--v35-story-img-scale,1.045)) translate3d(var(--v35-story-img-x,0px),0,0)!important;
  }
  html.v39-story .story-frame__shade{
    background:
      linear-gradient(180deg,rgba(2,2,2,.18) 0%,rgba(2,2,2,.01) 34%,rgba(2,2,2,.12) 53%,rgba(2,2,2,.89) 100%),
      linear-gradient(90deg,rgba(0,0,0,.20),transparent 58%)!important;
  }

  html.v39-story .story-frame__top{
    left:20px!important;
    right:20px!important;
    top:20px!important;
    font-size:6.5px!important;
    letter-spacing:.18em!important;
    opacity:.96!important;
  }
  html.v39-story .story-frame__top span:first-child{
    color:#ead078!important;
  }

  /* Give the image room to breathe: year and milestone are stacked instead of
     fighting for the same baseline on narrow screens. */
  html.v39-story .story-frame__copy{
    left:20px!important;
    right:20px!important;
    bottom:28px!important;
    display:block!important;
  }
  html.v39-story .story-frame__copy>strong{
    display:block!important;
    margin:0 0 18px!important;
    font-size:clamp(76px,22.5vw,98px)!important;
    line-height:.61!important;
    letter-spacing:-.055em!important;
    white-space:nowrap!important;
  }
  html.v39-story .story-frame[data-year="2023-2024"] .story-frame__copy>strong{
    font-size:clamp(58px,17.2vw,76px)!important;
    letter-spacing:-.04em!important;
  }
  html.v39-story .story-frame__copy>div{
    position:relative!important;
    padding-top:13px!important;
    border-top:1px solid rgba(255,255,255,.30)!important;
    max-width:90%!important;
  }
  html.v39-story .story-frame__copy small{
    margin:0 0 8px!important;
    color:#e5c76e!important;
    font-size:6px!important;
    letter-spacing:.19em!important;
  }
  html.v39-story .story-frame__copy h3{
    margin:0!important;
    max-width:12ch!important;
    font-size:clamp(30px,8.3vw,39px)!important;
    line-height:.82!important;
    letter-spacing:-.025em!important;
  }
  html.v39-story .story-frame__note{
    display:none!important;
  }

  /* Current chapter text and meter live immediately under the visual, so they
     read as part of one component instead of floating at the bottom of the viewport. */
  html.v39-story .story-mobile-note{
    display:block!important;
    position:absolute!important;
    z-index:9!important;
    left:20px!important;
    right:20px!important;
    top:calc(max(122px,calc(env(safe-area-inset-top) + 102px)) + clamp(430px,57svh,560px) + 22px)!important;
    color:#736d64!important;
    font:700 7px/1.35 var(--sans)!important;
    letter-spacing:.13em!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    opacity:.86!important;
    pointer-events:none!important;
    transition:opacity .22s ease,transform .35s var(--v39-ease)!important;
  }
  html.v39-story .story-mobile-note.is-changing{
    opacity:0!important;
    transform:translateY(5px)!important;
  }
  html.v39-story .story-progress{
    display:grid!important;
    position:absolute!important;
    z-index:10!important;
    left:20px!important;
    right:20px!important;
    top:calc(max(122px,calc(env(safe-area-inset-top) + 102px)) + clamp(430px,57svh,560px) + 48px)!important;
    bottom:auto!important;
    grid-template-columns:auto 1fr auto!important;
    align-items:center!important;
    gap:12px!important;
    color:#8d867c!important;
    font:700 7px/1 var(--sans)!important;
    letter-spacing:.14em!important;
    pointer-events:none!important;
  }
  html.v39-story .story-progress i{
    display:block!important;
    height:1px!important;
    background:rgba(20,20,18,.14)!important;
    overflow:hidden!important;
  }
  html.v39-story .story-progress i b{
    display:block!important;
    width:100%!important;
    height:100%!important;
    background:var(--v39-gold)!important;
    transform:scaleX(var(--v35-story-meter,.25))!important;
    transform-origin:left center!important;
  }

  /* Small phones: keep the whole composition inside the visual viewport. */
  @media(max-height:720px){
    html.v39-story .story-mobile-stagehead{top:max(72px,calc(env(safe-area-inset-top) + 54px))!important}
    html.v39-story .story-v2 .story-track{top:max(104px,calc(env(safe-area-inset-top) + 86px))!important}
    html.v39-story .story-frame{height:clamp(390px,54svh,455px)!important;min-height:390px!important;max-height:455px!important}
    html.v39-story .story-mobile-note{top:calc(max(104px,calc(env(safe-area-inset-top) + 86px)) + clamp(390px,54svh,455px) + 18px)!important}
    html.v39-story .story-progress{top:calc(max(104px,calc(env(safe-area-inset-top) + 86px)) + clamp(390px,54svh,455px) + 43px)!important}
  }

  @media(max-width:360px){
    html.v39-story .story-frame{flex-basis:88vw!important;width:88vw!important;border-radius:24px!important}
    html.v39-story .story-v2 .story-track{padding-left:18px!important;padding-right:18px!important}
    html.v39-story .story-mobile-stagehead,
    html.v39-story .story-mobile-note,
    html.v39-story .story-progress{left:18px!important;right:18px!important}
    html.v39-story .story-frame__top,
    html.v39-story .story-frame__copy{left:18px!important;right:18px!important}
  }
}

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