/* The story scenes share one stationary stage during each curved reveal. */
.life-journey{position:relative}
/* Give the story cards a distinct tier below navigation, easing the gap only
   when a shorter viewport needs room for the complete card. */
.life-story,.night-story{--story-nav-gap:clamp(24px,calc(100dvh - 640px),80px);--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}
.life-story{position:relative;height:100vh;height:100dvh;overflow:hidden;background:#211e1b;scroll-margin-top:0;outline:none}
.life-journey.is-pinned #hero{position:sticky;top:var(--hero-pin-top,0);z-index:0}
.life-journey.is-pinned .house{position:sticky;top:0;z-index:1;height:100dvh;margin-top:-100dvh;clip-path:inset(100% 0 0);overflow:hidden}
.life-journey.is-pinned .life-story{position:sticky;top:0;z-index:2;margin-top:-100dvh;clip-path:inset(100% 0 0)}
.life-journey.is-pinned .night-story{position:sticky;top:0;z-index:3;margin-top:-100dvh;clip-path:inset(100% 0 0)}
.life-journey.is-pinned .morning-story{z-index:4}
/* The final chapter keeps its full content height, so reading continues with
   ordinary scrolling as soon as its curved reveal has settled. */
.life-journey.is-pinned .ability-index{position:sticky;top:0;z-index:5;height:100dvh;min-height:0;margin-top:-100dvh;clip-path:inset(100% 0 0);overflow:hidden}
.life-journey.is-pinned .safety-section{position:sticky;top:0;z-index:6;min-height:100dvh;margin-top:-100dvh;clip-path:inset(100% 0 0)}
.life-journey.is-pinned::after{content:'';display:block;height:var(--story-reveal-distance,180dvh)}
/* The information panel belongs to the incoming scene and shares its mask. */
@media(min-width:761px){
  .life-journey #hero{height:100dvh}
  .life-journey #hero>.copy{bottom:clamp(64px,8vh,112px)}
}
@media(max-width:760px){.life-journey #hero>.copy{min-height:100dvh;padding-bottom:max(96px,env(safe-area-inset-bottom))}}
@media(max-height:600px) and (min-width:761px){.life-journey #hero>.copy{bottom:40px}}
.life-film,.life-screen{position:absolute;inset:0;width:100%;height:100%;margin:0}
.life-screen{isolation:isolate;overflow:hidden}
/* A faint header scrim follows the film's cover scale and clears KIN's face. */
.life-screen::after{content:'';position:absolute;z-index:2;inset:0 0 auto;height:max(6dvh,3.375vw);background:linear-gradient(to bottom,rgb(0 0 0 / 10%),rgb(0 0 0 / 0%));pointer-events:none}
.life-poster,.life-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.life-video[hidden],.life-controls[hidden],.life-preview-note[hidden],.life-scrub[hidden],.life-progress[hidden],.life-sound[hidden]{display:none}
.life-video{z-index:1;background:#211e1b}
/* Ambient films pass gestures to the scene; playback uses separate controls. */
.life-video,.night-story-video{pointer-events:none}
.life-video.is-resetting{visibility:hidden}
.life-preview-note{position:absolute;z-index:3;top:calc(var(--nav-clearance,88px) + 22px);right:var(--gutter);margin:0;color:#f1ede6;font:400 10px/1.5 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
/* The headline and final content layout stay fixed while the rounded body opens
   downward through the hallway. Only its viewing window changes height. */
.life-copy,.life-detail{--glass-rim:16px;position:absolute;z-index:3;box-sizing:border-box;padding:var(--glass-rim);border:1px solid var(--glass-edge);border-radius:var(--glass-radius);background:rgb(28 27 24 / 94%);color:var(--ink)}
.life-copy{top:calc(var(--nav-shell-bottom) + var(--story-nav-gap));right:var(--gutter);width:var(--glass-rail-width);font:700 clamp(42px,3.1vw,58px)/.96 var(--f-display);letter-spacing:-.055em}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .life-copy,.life-detail{background:transparent;-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
}
.life-copy-body{margin-top:var(--glass-rim);border-radius:calc(var(--glass-radius) - var(--glass-rim));background:var(--glass-inset);overflow:hidden}
.life-copy-content{--copy-content-min-height:clamp(268px,calc(21vw - 24px),362px);--copy-content-padding:clamp(22px,1.75vw,34px);--copy-content-gap:28px;position:relative;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;gap:var(--copy-content-gap);min-height:var(--copy-content-min-height);padding:var(--copy-content-padding)}
.life-copy h2{display:grid;width:max-content;max-width:100%;margin:0;font:inherit;letter-spacing:inherit}
.life-kicker.eyebrow{box-sizing:border-box;min-height:var(--glass-label-height);margin:0;padding:5px 16px;border:0;border-radius:999px;background:var(--glass-label);font-size:11px;letter-spacing:.1em}
.life-kicker.eyebrow>span{width:clamp(28px,2.8vw,48px);flex-shrink:0}
.life-support{max-width:34ch;margin:0;color:#f1ede6;font:400 clamp(15px,1.05vw,18px)/1.55 var(--f-sans);letter-spacing:-.01em;text-wrap:pretty}
.life-copy-phase{display:block;grid-area:1 / 1;clip-path:inset(-.12em -.18em -.32em -.12em);opacity:1}
.life-copy-line{display:block;white-space:nowrap}
.life-end-copy{clip-path:inset(-.12em 100% -.32em -.12em);opacity:0}
/* A single 1.1s editorial sweep follows the hallway expansion. Replay resets
   immediately while the entire scene is masked. */
.life-film.is-settled .life-copy-phase{transition:clip-path 1100ms var(--ease-in-out),opacity 1100ms var(--ease-in-out)}
.life-film.is-settled .life-intro{clip-path:inset(-.12em -.18em -.32em 100%);opacity:0}
.life-film.is-settled .life-end-copy{clip-path:inset(-.12em -.18em -.32em -.12em);opacity:1}
.life-film.is-keyboard-playback .life-copy-phase{transition:none}
.life-story.is-keyboard-navigation .life-copy-phase{transition:none}
/* The continuation is the final row inside the shared glass panel. */
.life-cta-reveal{margin-top:12px}
.life-cta-drop{width:100%;min-height:0}
.life-cta.cta,.life-cta.cta:hover{--story-cta-fill:rgb(28 27 24 / 60%);background:var(--story-cta-fill);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);white-space:nowrap;text-decoration:none}
/* Dinner opens this row at its existing cue. One pixel of clipping clearance
   retains the capsule outline; the glass grows with the row rather than leaving
   an empty footer under the opening headline. */
.life-film.is-copy-animated .life-cta-reveal{display:grid;grid-template-rows:0fr;margin:-1px -1px -1px;padding:1px;overflow:hidden}
.life-film.is-copy-animated.is-copy-open .life-cta-reveal{grid-template-rows:1fr;margin-top:11px;transition:grid-template-rows 700ms var(--ease-out),margin-top 700ms var(--ease-out)}
.life-film.is-copy-animated .life-cta-drop{opacity:0;visibility:hidden;transform:translateY(-12px);pointer-events:none}
.life-film.is-copy-animated.is-copy-open .life-cta-drop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition:transform 700ms var(--ease-out),opacity 250ms var(--ease-out)}
/* The supporting films share the same glass and broad, low-opacity shadows.
   Each inset enters at its main film's cue. */
.life-detail{left:var(--gutter);bottom:calc(clamp(28px,3.6vh,48px) + 32px);width:calc(var(--glass-rail-width) * .618);box-shadow:16px 24px 72px -12px rgb(20 16 12 / 18%),36px 48px 120px -28px rgb(20 16 12 / 10%);opacity:0;visibility:hidden;transform:translateX(calc(-100% - var(--gutter)))}
.life-detail .life-kicker{padding-inline:12px;gap:8px;letter-spacing:.06em;white-space:nowrap}
.life-detail .life-kicker>span{width:clamp(28px,1.85vw,34px)}
.life-detail-body{--detail-radius:calc(var(--glass-radius) - var(--glass-rim));margin-top:var(--glass-rim);border-radius:var(--detail-radius)}
/* Clip the composited video itself as well as its wrapper: overflow alone can
   expose square video frames while the surrounding glass is composited. */
.life-detail-media{position:relative;border-radius:inherit;overflow:hidden;isolation:isolate;clip-path:inset(0 round var(--detail-radius))}
.life-detail-image{display:block;width:100%;height:auto;aspect-ratio:480/854;object-fit:cover}
.life-detail-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:inherit;clip-path:inset(0 round var(--detail-radius))}
.life-detail-play{position:absolute;right:4px;bottom:4px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;isolation:isolate}
.life-detail-play::before{content:"";position:absolute;inset:6px;border-radius:50%;background:#282522;z-index:-1}
.life-detail-play:hover::before{background:#49433d}
.life-detail-play:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.life-detail-play[hidden],.detail-pause-icon,.life-detail-play.is-playing .detail-play-icon{display:none}
.life-detail-play.is-playing .detail-pause-icon{display:block}
.life-film.is-detail-visible .life-detail,.night-story.is-detail-visible>.night-detail,.morning-story.is-detail-visible .morning-detail{opacity:1;visibility:visible;transform:translateX(0);transition:transform 1200ms var(--ease-out),opacity 350ms var(--ease-out)}
/* The family arrives promptly, with more time for the last part of its glide. */
.morning-story.is-detail-visible .morning-detail{transition-duration:1600ms,350ms}
.life-story.is-keyboard-navigation .life-detail,.night-story.is-keyboard-navigation .life-detail,.life-film.is-keyboard-playback .life-detail{transition:none}
/* Review the clean camera reference; website copy belongs to the finished film. */
.life-story.is-motion-preview{border-radius:0}
.life-story.is-motion-preview :is(.life-preview-note,.life-copy,.life-detail){display:none}
.life-story.is-motion-preview .life-screen::after{display:none}
.life-film-footer{position:absolute;z-index:4;left:var(--gutter);right:var(--gutter);bottom:max(28px,env(safe-area-inset-bottom));margin:0;display:flex;justify-content:flex-end;pointer-events:none}
.life-controls{display:flex;align-items:center;gap:18px;color:#f1ede6;pointer-events:auto}
:is(.life-play,.life-sound){display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;border:1px solid rgb(241 237 230 / 48%);border-radius:999px;background:rgb(24 21 18 / 55%);color:#f1ede6;font:400 11px/1.4 var(--f-mono);cursor:pointer;transition:background-color 160ms ease,transform 120ms cubic-bezier(.23,1,.32,1)}
.life-play{min-width:126px;padding:10px 16px}
.life-sound{flex:0 0 44px;width:44px;padding:0}
.life-sound-off,.life-sound.is-muted .life-sound-on{display:none}
.life-sound.is-muted .life-sound-off{display:block}
.life-sound:disabled{opacity:.5;cursor:default}
:is(.life-play,.life-sound):active{transform:scale(.97)}
:is(.life-play,.life-sound,.life-scrub):focus-visible{outline:2px solid var(--amber);outline-offset:4px;transition:none}
:is(.life-play,.life-sound):focus-visible:active{transform:none}
.life-pause-icon{display:none}.life-film.is-playing .life-play-icon{display:none}.life-film.is-playing .life-pause-icon{display:block}
.life-progress{display:block;appearance:none;-webkit-appearance:none;width:clamp(60px,9vw,160px);height:2px;border:0;background:rgb(241 237 230 / 35%);color:var(--amber)}
.life-progress::-webkit-progress-bar{background:rgb(241 237 230 / 35%)}
.life-progress::-webkit-progress-value{background:var(--amber)}
.life-progress::-moz-progress-bar{background:var(--amber)}
/* The reference preview adds seeking so a frame can be inspected at any size. */
.life-scrub{width:clamp(100px,13vw,200px);height:44px;margin:0;accent-color:var(--amber);cursor:pointer}
.life-time{font:400 10px/1.5 var(--f-mono);font-variant-numeric:tabular-nums;color:#f1ede6;white-space:nowrap}
.life-film.is-error .life-progress,.life-film.is-error .life-scrub,.life-film.is-error .life-time{display:none}
@media(hover:hover) and (pointer:fine){:is(.life-play,.life-sound):hover{background:rgb(24 21 18 / 80%)}}
/* Desktop story cards share the navigation width, including tall windows.
   Only genuinely narrow windows need a compact column beside the film. */
@media(min-width:761px) and (max-width:1239px){
  .life-copy{width:clamp(236px,23vw,292px);font-size:clamp(30px,2.7vw,33px)}
  .life-copy-content{--copy-content-min-height:276px;--copy-content-padding:16px;--copy-content-gap:24px}
  .life-support{font-size:14px}
}
@media(max-width:1239px),(max-height:640px){.life-detail{display:none}}
@media(max-width:760px){
  .life-cta-reveal{display:none}
  .life-preview-note{font-size:9px;top:calc(var(--nav-clearance,76px) + 16px);letter-spacing:0}
  .life-film-footer{bottom:max(22px,env(safe-area-inset-bottom))}
  .life-controls{width:100%;gap:12px}.life-progress,.life-scrub{flex:1;width:0;min-width:36px}
  .life-play{min-width:116px;padding-inline:12px}
  /* Two compact lines give the connected script its own baseline on phones. */
  .life-copy{--glass-rim:10px;top:auto;left:var(--gutter);right:var(--gutter);bottom:max(14px,env(safe-area-inset-bottom));width:auto;font-size:clamp(26px,7vw,32px);line-height:1.15;letter-spacing:-.04em}
  .life-copy-content{--copy-content-min-height:0px;--copy-content-padding:16px;--copy-content-gap:10px}
  .life-kicker.eyebrow{min-height:28px;padding:4px 14px}
  .life-support{max-width:none;font-size:14px;line-height:1.45}
  .life-copy-phase{min-height:2.55em}
  .life-copy-line{display:block}
  /* The film is framed inside the part of the page the reader can see; life-transition.js measures the band. Some phone
     browsers lay the page out under their address bar, which hid KIN's head (Jesse, 2026-11-04). */
  .life-poster,.life-video{top:var(--film-top,0px);bottom:auto;height:calc(100% - var(--film-top,0px) - var(--film-bottom,0px))}
}
@media(max-width:380px){.life-time{display:none}}
@media(max-height:600px) and (min-width:761px){
  .life-preview-note{top:calc(var(--nav-clearance,88px) + 12px)}.life-film-footer{bottom:18px}
  .life-copy{top:calc(var(--nav-shell-bottom) + var(--story-nav-gap));font-size:clamp(30px,2.7vw,37px)}
  .life-copy-content{--copy-content-min-height:0px;--copy-content-padding:16px;--copy-content-gap:20px}
  .life-support{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.life-story{border-radius:0}.life-film .life-copy-phase,.life-film.is-detail-visible .life-detail,.night-story.is-detail-visible>.night-detail,.morning-story.is-detail-visible .morning-detail,.life-detail,.life-play,.life-sound{transition:none;transform:none}.life-detail{opacity:1;visibility:visible}}