/* Night and morning inherit the approved glass and typography. */
.night-story{position:relative;isolation:isolate;height:100vh;height:100dvh;overflow:hidden;
  background:#211e1b;color:var(--ink);outline:none;scroll-margin-top:0}
.night-story-media,.night-film-frame{position:absolute;inset:0}
.night-story-image,.night-story-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.night-film-toggle{position:absolute;z-index:2;left:var(--gutter);bottom:max(28px,env(safe-area-inset-bottom));display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--glass-edge);border-radius:50%;background:#282522;color:var(--ink);cursor:pointer;opacity:0;pointer-events:none}
/* Ambient films have no routine overlay. Retain keyboard access and a fallback
   for blocked autoplay, explicit pauses, reduced motion and data saving. */
.night-film-toggle.needs-playback,.night-film-toggle:focus-visible{opacity:1;pointer-events:auto}
.night-film-toggle:hover{background:#49433d}
.night-film-toggle:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.night-story-video[hidden],.night-film-toggle[hidden],.night-pause-icon,.night-film-toggle.is-playing .night-play-icon{display:none}
.night-film-toggle.is-playing .night-pause-icon{display:block}
.night-story::before{content:'';position:absolute;z-index:1;inset:0 0 auto;height:max(6dvh,3.375vw);pointer-events:none;
  background:linear-gradient(to bottom,rgb(0 0 0 / 10%),transparent)}
/* The outer glass and rounded inset grow together. The button rides the lower
   edge while the copy stays full size inside the expanding inset. */
.morning-story-copy{box-sizing:border-box;height:var(--morning-card-height,auto);padding:0;overflow:hidden}
/* Long copy must not widen the reveal windows beyond the glass card. */
.morning-card-window,.morning-dinner-window{min-width:0;min-height:0}
.morning-card-window{height:100%}
.morning-card-content{box-sizing:border-box;height:100%;display:flex;flex-direction:column;padding:var(--glass-rim)}
.morning-card-content>.life-kicker,.morning-card-content>.life-cta-reveal{flex:none}
.morning-card-content>.life-copy-body{flex:1 1 auto;min-height:0}
.morning-story-copy .life-copy-content{min-height:0;gap:0}
.morning-copy-base{display:flex;flex-direction:column;justify-content:space-between;gap:var(--copy-content-gap);min-height:max(0px,calc(var(--copy-content-min-height) - var(--copy-content-padding) - var(--copy-content-padding)))}
.morning-dinner-reveal{display:grid;grid-template-rows:1fr;overflow:hidden}
.morning-dinner-content{padding-top:12px}
.morning-rail{display:contents}
.is-copy-timed .morning-story-copy{transition:height 1200ms var(--ease-out)}
.is-copy-timed.is-copy-visible:not(.is-dinner-visible) .morning-story-copy{height:var(--morning-card-base-height,auto)}
.is-copy-timed.is-dinner-visible .morning-story-copy{transition-duration:900ms}
.is-copy-timed:not(.is-copy-visible) .morning-story-copy{height:0;visibility:hidden;transition:none}
.is-copy-timed .morning-dinner-reveal{transition:grid-template-rows 900ms var(--ease-out)}
.is-copy-timed:not(.is-dinner-visible) .morning-dinner-reveal{grid-template-rows:0fr;transition:none}
.life-cta.cta{box-sizing:border-box;width:100%;font-size:11px;line-height:1.35;letter-spacing:0;gap:18px;padding-inline:44px 22px;justify-content:space-between}
.life-cta .cta-label{min-width:0;white-space:normal;text-align:left;text-wrap:balance}
/* Keep the full-width capsule and arrow inside the glass. The wide card's
   eye and label still move within the existing space between label and arrow.
   The unenhanced anchor retains the readable fallback from life-with-kin.css. */
.life-cta.cta-motion,.life-cta.cta-motion:hover{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.life-cta.cta-motion::before{inset:-1px;clip-path:inset(0 round 999px);opacity:1;background:var(--cta-fill);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.life-cta .cta-outline-extension{display:none}
.life-cta.cta-motion:hover .cta-arrow,.life-cta.cta-motion:hover .cta-outline-right{transform:none}
.life-cta:focus-visible{outline-offset:-4px}
.life-cta .cta-arrow svg{transform-origin:50% 50%;transition:transform 200ms var(--cta-ease)}
@media(hover:hover) and (pointer:fine){
  .life-cta:hover .cta-arrow svg{transform:rotate(90deg);transition-duration:280ms}
}
.life-cta:focus-visible .cta-arrow svg{transform:rotate(90deg);transition:none}
@media(hover:none),(pointer:coarse){.life-cta .cta-arrow svg{transform:rotate(90deg)}}
@media(prefers-reduced-motion:reduce){
  .is-copy-timed .morning-story-copy,.is-copy-timed .morning-dinner-reveal{transition:none}
  .life-cta .cta-arrow svg,.life-cta:hover .cta-arrow svg{transform:rotate(90deg);transition:none}
}
/* Compact desktop rails use the same contained feedback as phone cards. */
@media(max-width:1239px){
  .life-cta.cta{gap:10px;padding:12px 16px 12px 36px}
  .life-cta .cta-eye-glow{display:none}
  .life-cta.cta-motion:hover .cta-dot{clip-path:inset(0 27px 0 0 round 3px)}
  .life-cta.cta-motion:hover .cta-label{transform:none}
  .life-cta .cta-dot,.life-cta .cta-eye-glow{left:16px}
}
@media(max-width:760px){
  /* Anchor to the final card's top so both reveals grow downward on phones. */
  .morning-story-copy.has-copy-anchor{top:calc(100% - var(--morning-card-height) - max(14px,env(safe-area-inset-bottom)));bottom:auto}
  /* Match the dinner chapter's immersive portrait crop behind the glass. */
  /* Framed inside the part of the page the reader can see (life-transition.js measures it), so KIN's head is not
     under the browser's address bar (Jesse, 2026-11-04). */
  .night-story-media{inset:var(--film-top,0px) 0 var(--film-bottom,0px)}
  .night-film-frame{inset:0}
  .night-story-image,.night-story-video{object-fit:cover;object-position:var(--mobile-film-position,50% 50%)}
  .morning-story{--mobile-film-position:43% 50%}
  /* The phone file has the crop cut in (Jesse, 2026-11-03: the moving crop landed late at the oven cut on iPhone). */
  .morning-story .night-story-video[data-baked]{object-position:50% 50%}
  .night-film-toggle{left:auto;right:var(--gutter);top:calc(var(--nav-shell-bottom) + 16px);bottom:auto}
  .life-copy h2 em{font-size:1.16em}
  .life-cta-reveal{display:block}
  .life-cta.cta{min-height:48px}
}
/* Morning copy keeps the navigation's width; its supporting film uses the
   shared bottom-left portrait layout independently of this rail. */
.morning-detail .life-detail-image{aspect-ratio:9/16}
@media(min-width:761px){
  .morning-rail{position:absolute;z-index:3;top:calc(var(--nav-shell-bottom) + var(--story-nav-gap));right:var(--gutter);bottom:28px;width:var(--glass-rail-width);display:flex;flex-direction:column;align-items:stretch;gap:16px;pointer-events:none}
  .morning-rail>.morning-story-copy{position:relative;inset:auto;flex:none;width:100%;font-size:clamp(32px,2.5vw,44px);pointer-events:auto}
  .morning-story-copy .life-copy-content{--copy-content-min-height:0px;--copy-content-padding:22px;--copy-content-gap:20px}
}
@media(min-width:761px) and (max-width:1239px){
  .morning-rail{width:clamp(236px,23vw,292px)}
  .morning-rail>.morning-story-copy{font-size:clamp(30px,2.7vw,33px)}
  .morning-story-copy .life-copy-content{--copy-content-padding:16px;--copy-content-gap:24px}
}