/* Mobile-only scroll ownership: native page momentum, no nested section tracks. */
@media(max-width:900px){
  html{scroll-behavior:auto;overscroll-behavior-y:auto}
  body{overscroll-behavior-y:auto}
  /* A tall scene may move up before pinning so its bottom remains reachable. */
  .scroll-section>.sticky{top:min(0px,calc(100svh - 780px))}
  html:has(body[data-landing-section]){overflow:clip;overscroll-behavior:auto}
  body[data-landing-section]{overflow:clip;overscroll-behavior:auto}
  body[data-landing-section=life],body[data-landing-section=rewind],body[data-landing-section=forever]{height:100vh;min-height:0}
  [data-landing-section=life] .track,[data-landing-section=rewind] .track,[data-landing-section=forever] #scroll-track{height:100%;min-height:0;overflow:clip}
  /* Vertical gestures are native, horizontal gestures remain available to controls. */
  [data-landing-section=rewind] #stage,[data-landing-section=rewind] #timeline{touch-action:pan-y pinch-zoom}
  [data-landing-section=life] .memory-tabs{touch-action:pan-x pan-y pinch-zoom;overscroll-behavior:auto}
  [data-landing-section] button,[data-landing-section] a{touch-action:manipulation}
}

@media(max-width:900px){
  /* Reserve feedback space so choosing Story/Place/Person never hits the stack. */
  [data-landing-section=life] #context-feedback{min-height:30px;margin-top:12px}
}

@media(max-width:900px){
  body:not([data-landing-section])>.review{position:static;width:max-content;margin:0 20px 24px}
}

/* One spacing scale for the assembled phone layout. */
@media(max-width:700px){
  body:not([data-landing-section]) .site-nav{padding-inline:20px;height:64px}
  body:not([data-landing-section]) .site-nav .start{min-height:44px;display:flex;align-items:center;padding:0 17px;font-size:12px}
  [data-landing-section=life] .context-heading{top:80px!important;left:20px;right:20px}
  [data-landing-section=life] .context-heading small{display:none}
  [data-landing-section=life] .context-heading h2{font-size:30px;line-height:1.08;margin:0 auto 8px;max-width:340px;text-wrap:balance}
  [data-landing-section=life] .context-heading p{font-size:17px;line-height:1.35}
  [data-landing-section=life] .context-actions{margin-top:16px;gap:8px}
  [data-landing-section=life] .context-actions button{min-height:44px;padding:0 17px;font-size:13px}
  [data-landing-section=life] #context-feedback{font-size:11px;line-height:1.4;min-height:16px;margin-top:10px}
  [data-landing-section=life] .memory-copy{margin-top:12px}
  [data-landing-section=life] .memory-copy h3{font-size:28px;margin-bottom:6px}
  [data-landing-section=life] .memory-copy p{font-size:12.5px;line-height:1.4;letter-spacing:-.2px}
  [data-landing-section=life] .memory-copy .chapter-origin{font-size:9px;line-height:1.35;margin-bottom:6px}
  [data-landing-section=life] .memory-tabs{max-width:calc(100% - 40px)}
  [data-landing-section=life] .memory-tabs button{flex-basis:102px;font-size:12px}
  [data-landing-section=rewind] .heading{top:84px!important;left:24px;right:24px}
  [data-landing-section=rewind] .heading h1{font-size:32px;line-height:1.08;letter-spacing:-1px;text-wrap:balance}
  [data-landing-section=rewind] .heading p{font-size:14px;line-height:1.45;max-width:310px;margin:12px auto 0}
  [data-landing-section=rewind] .copy h2{font-size:23px;line-height:1.15}
  [data-landing-section=rewind] .copy p{font-size:14px;line-height:1.45;max-width:310px;margin:8px auto 0}
  [data-landing-section=share] .share{padding:48px 24px;gap:20px}
  [data-landing-section=share] .copy{text-align:center}
  [data-landing-section=share] .copy h1{font-size:32px;line-height:1.12;letter-spacing:-1px;margin:14px auto;text-wrap:balance;max-width:340px}
  [data-landing-section=share] .copy h1 br,[data-landing-section=share] .copy p br{display:none}
  [data-landing-section=share] .copy p{font-size:15px;line-height:1.5;margin:0 auto;max-width:320px}
  [data-landing-section=share] .network{margin-top:0}
  [data-landing-section=share] .mobile-cta{width:100%;min-height:50px;justify-content:space-between;margin-top:0;padding-inline:24px}
  [data-landing-section=forever] .pin{padding:96px 20px 40px;justify-content:flex-start}
  [data-landing-section=forever] .viewport{margin-top:40px}
  [data-landing-section=forever] .caption{margin-top:24px;font-size:12px}
  [data-landing-section=forever] .intro h1{font-size:32px;line-height:1.1;letter-spacing:-1px;text-wrap:balance}
  [data-landing-section=forever] .intro p{font-size:15px;line-height:1.4;margin:12px auto}
  [data-landing-section=forever] .support{font-size:13px;line-height:1.5;max-width:300px}
  body:not([data-landing-section]) .closing{padding:48px 24px;gap:32px}
  body:not([data-landing-section]) .footer{padding:24px 24px 32px;gap:12px;line-height:1.5}
}

@media(max-width:900px){
  /* Rear captions must not show through the fading card shell on entry. */
  [data-landing-section=life] .memory-card[data-active=false] .memory-copy{visibility:hidden}
}

@media(max-width:900px){
  /* The hairline shares the card shell reveal, so it cannot precede the photo. */
  [data-landing-section=life] .memory-card{
    box-shadow:0 0 0 1px rgb(120 120 114 / calc(var(--shell) * .28));
  }
}

@media(max-width:900px){
  [data-landing-section=life] .memory-tabs{width:330px}
  [data-landing-section=life] .memory-tabs button{flex:1 1 0;font-size:13px}
  [data-landing-section=life] #context-feedback{min-height:0;margin:0}
}
@media(max-width:700px){
 body:has(#reduce:checked) .scroll-section.forever{height:auto}
 body:has(#reduce:checked) .scroll-section.forever>.sticky{position:relative;top:0;height:780px}
}