/* A two-part statement, separated by an uninterrupted photographic beat.
   Static is the baseline: no JS and reduced motion keep both ideas readable. */
.pack-story{background:var(--ink);color:var(--paper);position:relative}
.pack-story-stage{position:relative;overflow:hidden;isolation:isolate}
.pack-story-opening{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:65svh;padding:90px var(--pad)}
.pack-story-label{position:absolute;top:40px;left:var(--pad);font-size:11px;color:#eeeee7a6}
.pack-story-prompt{display:flex;gap:.22em;font-size:clamp(54px,10.3vw,168px);line-height:1.04;font-weight:400;letter-spacing:-.03em;margin:0;text-align:center}
.pack-story-prompt>span{display:block}
.pack-story-dot{color:var(--orange)}
.pack-story-stroke{width:64px;height:3px;background:var(--orange);margin-top:34px;transform-origin:center}
.pack-story-cue{position:absolute;bottom:36px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;font-size:10px;color:#eeeee7a6;margin:0}
.pack-story-cue>span{color:var(--orange);font-size:18px}
.pack-story-picture{position:relative;margin:0;height:76svh;overflow:hidden}
.pack-story-picture>img{width:100%;height:100%;object-fit:cover;object-position:50% 48%;display:block}
.pack-story-picture>figcaption{position:absolute;left:var(--pad);bottom:24px;font-size:10px;color:var(--paper);background:#141514b8;padding:7px 9px}
.pack-story-answer{position:relative;padding:50px var(--pad) 60px}
.pack-story-answer h2{font-size:clamp(48px,8.3vw,132px);font-weight:400;line-height:1.05;letter-spacing:-.03em;margin:0}
.pack-word-window{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.pack-word{display:inline-block}
.pack-word-window:last-child{color:var(--orange)}
.pack-story-decisions{display:flex;flex-wrap:wrap;gap:24px;margin:30px 0 0;font-size:11px;line-height:1.6}
.pack-story-track{display:none}

/* Motion is opt-in, only after the controller has initialized. */
@media(prefers-reduced-motion:no-preference){
 .pack-story.is-motion{height:310svh}
 .pack-story.is-motion .pack-story-stage{height:100svh;position:sticky;top:0}
 .pack-story.is-motion .pack-story-opening{position:absolute;inset:0;min-height:0;padding:0 var(--pad);z-index:2;pointer-events:none}
 .pack-story.is-motion .pack-story-label{top:120px}
 .pack-story.is-motion .pack-story-prompt{transform:translateY(-18px)}
 .pack-story.is-motion .pack-story-stroke{position:absolute;top:61%;margin:0}
 .pack-story.is-motion .pack-story-cue{bottom:42px}
 .pack-story.is-motion .pack-story-picture{position:absolute;inset:0;height:100%;clip-path:inset(50% 0)}
 .pack-story.is-motion .pack-story-picture>img{transform:scale(1.09)}
 .pack-story.is-motion .pack-story-picture:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 18%,#14151455 42%,#141514e6 100%);opacity:var(--shade,0);pointer-events:none}
 .pack-story.is-motion .pack-story-picture>figcaption{z-index:1;bottom:auto;top:118px;opacity:var(--credit,0)}
 .pack-story.is-motion .pack-story-answer{position:absolute;inset:auto var(--pad) 11%;padding:0;pointer-events:none}
 .pack-story.is-motion .pack-story-answer h2{display:flex;flex-direction:column;align-items:flex-start;font-size:clamp(52px,8.3vw,132px)}
 .pack-story.is-motion .pack-word-window:nth-child(2){margin-left:16%}
 .pack-story.is-motion .pack-word-window:nth-child(3){margin-left:32%}
 .pack-story.is-motion .pack-word{transform:translateY(115%);opacity:0}
 .pack-story.is-motion .pack-story-decisions{margin:26px 0 0 32%;opacity:0}
 .pack-story.is-motion .pack-story-track{display:block;position:absolute;bottom:0;left:0;right:0;height:2px;background:#eeeee718}
 .pack-story-track i{display:block;width:100%;height:100%;background:var(--orange);transform:scaleX(0);transform-origin:left}
}
@media(max-width:700px){
 .pack-story-opening{min-height:55svh}
 .pack-story-label{font-size:10px;left:20px}
 .pack-story-prompt{flex-direction:column;gap:0;font-size:clamp(62px,18vw,108px)}
 .pack-story-cue{left:20px;right:20px;font-size:10px}
 .pack-story-picture{height:65svh}
 .pack-story-picture>img{object-position:57% 50%}
 .pack-story-answer{padding:35px 20px 45px}
 .pack-story-answer h2{font-size:clamp(42px,12vw,78px)}
 .pack-story-decisions{gap:12px;font-size:10px}
 .pack-story.is-motion .pack-story-label,.pack-story.is-motion .pack-story-picture>figcaption{top:103px}
 .pack-story.is-motion .pack-story-stroke{top:68%}
 .pack-story.is-motion .pack-story-answer{left:20px;right:20px;bottom:12%}
 .pack-story.is-motion .pack-story-answer h2{font-size:clamp(54px,16vw,94px)}
 .pack-story.is-motion .pack-word-window:nth-child(2){margin-left:12%}
 .pack-story.is-motion .pack-word-window:nth-child(3){margin-left:24%}
 .pack-story.is-motion .pack-story-decisions{margin:26px 0 0;gap:14px}
}
@media(max-height:500px) and (min-width:701px){
 .pack-story.is-motion .pack-story-prompt{font-size:15vh}
 .pack-story.is-motion .pack-story-answer h2{font-size:13vh}
 .pack-story.is-motion .pack-story-answer{bottom:7%}
 .pack-story.is-motion .pack-story-label{top:95px}
 .pack-story.is-motion .pack-story-decisions{margin-top:16px}
}