/* Readable, unpinned fallback is the default. Motion is an enhancement. */
.story{--story-header:80px;background:var(--light);color:var(--ink)}
.story-stage{position:relative;overflow:hidden}
.story-topline{display:flex;justify-content:space-between;gap:20px;padding:28px 56px;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.story-photo{position:relative;overflow:hidden;background:#e5e2df;aspect-ratio:1672/941}
.scene-media{position:absolute;inset:0;overflow:hidden}.scene-media img{width:100%;height:100%;object-fit:cover;object-position:50% 37%}.scene-media:not(:nth-child(3)){display:none}
.story-copy{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:48px 56px}.chapter-label{display:block;color:var(--muted);font-size:9px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}.chapter h1,.chapter h2{font-size:clamp(28px,3vw,40px)}.line{display:block}.line-inner{display:block}.chapter p{color:var(--muted);font-size:12px;margin-top:24px}.story-caption{font-size:9px;letter-spacing:.05em;color:var(--muted);padding:14px 56px}.story-bottom{padding:24px 56px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:26px;align-items:center}.story-skip{font-size:12px}.story-skip span{margin-left:24px}.story-scroll,.story-pagination,.story-progress,.scene-rule{display:none}
@media(prefers-reduced-motion:no-preference){
 .motion .story{height:calc(280svh + 100svh - var(--story-header))}
 .motion .story-stage{height:calc(100svh - var(--story-header));min-height:580px;position:sticky;top:var(--story-header);background:var(--light);transition:background 1s}
 .motion .story-stage[data-scene="1"]{background:#efeeed}
 .motion .story-stage[data-scene="2"]{background:#ffffff}
 .motion .story-topline{position:absolute;inset:0 0 auto;z-index:3;color:var(--muted);font-size:9px;padding:24px 56px}
 .motion .story-copy{position:absolute;inset:0;display:block;padding:0;z-index:2;pointer-events:none}
 .motion .chapter{position:absolute;inset:0;visibility:hidden}.motion .chapter:first-child{visibility:visible}
 .motion .chapter-label{position:absolute;right:56px;top:104px;font-size:9px;letter-spacing:.1em}
 .motion .chapter h1,.motion .chapter h2{position:absolute;top:68px;left:56px;font-size:clamp(60px,5.5vw,96px);line-height:1.03}
 .motion .line{overflow:hidden;padding:0 8px 9px 0;margin-bottom:-8px}.motion .line-inner{will-change:transform;transform-origin:left center}
 .motion .chapter em{color:var(--accent)}.motion .chapter p{position:absolute;top:148px;right:56px;margin:0;width:230px;font-size:12px;line-height:1.6}
 .motion .story-photo{position:absolute;top:37%;bottom:86px;left:0;right:0;aspect-ratio:auto;clip-path:inset(0 var(--photo-inset,3.2%));will-change:clip-path}
 .motion .scene-media{display:block;will-change:clip-path}.motion .scene-media:not(:first-child){clip-path:inset(100% 0 0)}
 .motion .scene-media img{will-change:transform;transform-origin:50% 50%}
 .motion .scene-rule{display:block;position:absolute;left:var(--rule-x,0%);top:0;bottom:0;width:1px;background:#ffffff;opacity:var(--rule-opacity,0);pointer-events:none}
 .motion .story-caption{position:absolute;left:56px;bottom:98px;padding:4px 9px;color:#ffffff;background:#404040d9;z-index:3;font-size:8px;letter-spacing:.06em;pointer-events:none}
 .motion .story-bottom{position:absolute;bottom:0;left:0;right:0;height:86px;padding:0 56px;border:0;z-index:4}
 .motion .story-pagination{display:flex;align-items:center;gap:7px;font-size:11px;font-variant-numeric:tabular-nums}.motion .story-scene-number{margin-right:14px}.motion .story-total{color:var(--muted);margin-left:14px}.motion .scene-tick{height:1px;width:25px;background:#bdb8b4;transition:background .4s,transform .4s}.motion .scene-tick.is-active{background:var(--accent);transform:scaleY(3)}
 .motion .story-scroll{display:flex;align-items:center;gap:18px;font-size:9px;letter-spacing:.05em;color:var(--muted)}.story-scroll button{display:grid;place-items:center;width:40px;height:40px;border:1px solid #888381;border-radius:50%;color:var(--accent);background:transparent;font-size:20px;transition:background .3s,color .3s,transform .3s}.story-scroll button:hover{background:var(--accent);color:var(--paper);transform:translateY(2px)}
 .motion .story-progress{display:block;position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--line)}.story-progress span{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
 .motion [data-reveal]{opacity:0;transform:translateY(35px);transition:opacity .8s,transform 1s cubic-bezier(.22,1,.36,1)}.motion [data-reveal].is-visible,.motion [data-reveal]:focus-within{opacity:1;transform:none}
 @media(min-width:901px) and (min-height:850px){.motion .story-photo{top:35%}.motion .chapter h1,.motion .chapter h2{top:85px;font-size:clamp(74px,6.2vw,104px)}}
 @media(max-width:1100px){.motion .story-topline{padding-inline:32px}.motion .chapter h1,.motion .chapter h2{left:32px;font-size:68px}.motion .chapter-label,.motion .chapter p{right:32px}.motion .story-bottom{padding-inline:32px}.motion .story-caption{left:32px}.motion .story-scroll{gap:12px}}
 @media(max-width:900px){
  .motion .story{--story-header:72px;height:calc(240svh + 100svh - var(--story-header))}
  .motion .story-stage{min-height:570px}
  .motion .story-topline{padding:24px 24px;font-size:8px;letter-spacing:.08em}
  .motion .chapter h1,.motion .chapter h2{left:24px;top:89px;font-size:clamp(58px,10vw,82px)}
  .motion .chapter-label{top:65px;left:25px;right:auto;font-size:8px;margin:0}
  .motion .chapter p{top:auto;bottom:133px;left:24px;right:auto;width:auto;max-width:32ch;font-size:12px}
  .motion .story-photo{top:36%;bottom:193px;clip-path:inset(0 var(--photo-inset,0%))}
  .motion .story-caption{bottom:205px;left:24px}
  .motion .story-bottom{height:110px;padding:0 24px 12px;align-items:center}
  .motion .story-skip{position:absolute;bottom:15px;left:24px;font-size:10px;color:var(--muted)}
  .motion .story-scroll>span{display:none}.motion .story-scroll{gap:10px}.story-scroll button{width:42px;height:42px}
  .motion .story-pagination{font-size:10px}.motion .scene-tick{width:22px}
 }
 @media(max-width:600px){
  .motion .chapter h1,.motion .chapter h2{font-size:clamp(56px,14.5vw,80px);top:106px;left:20px;letter-spacing:-.025em}
  .motion .chapter em{font-size:.95em}
  .motion .chapter-label{left:21px;top:76px}.motion .story-topline{padding-inline:20px}
  .motion .story-photo{top:39%;bottom:auto;height:auto;aspect-ratio:1672/1040}
  .motion .scene-media img{object-position:50% 50%}
  .motion .chapter p{left:20px;bottom:143px;font-size:12px}
  .motion .story-caption{left:auto;right:20px;bottom:193px;font-size:9px;background:transparent;padding:0;color:var(--muted)}
  .motion .story-bottom{padding-inline:20px;height:110px}.motion .story-skip{left:20px}
 }
 @media(max-width:600px) and (max-height:740px){
  .motion .story-stage{min-height:0}.motion .chapter h1,.motion .chapter h2{top:79px;font-size:clamp(49px,13.5vw,67px)}.motion .chapter-label{top:53px}
  .motion .story-photo{top:40%;aspect-ratio:1672/880}.motion .chapter p{bottom:105px;font-size:11px}.motion .story-caption{bottom:146px;background:#404040d9;color:#ffffff;padding:2px 6px}.motion .story-bottom{height:92px}.motion .story-topline{padding-top:18px}.motion .story-skip{bottom:10px}
 }
 @media(max-height:540px) and (min-width:601px){
  .motion .story-stage{min-height:0}.motion .story-topline{padding-top:12px}.motion .chapter h1,.motion .chapter h2{top:49px;font-size:40px}.motion .chapter-label{top:60px;left:auto;right:32px}.motion .chapter p{left:auto;right:32px;top:90px;bottom:auto;width:190px;font-size:10px}.motion .story-photo{top:39%;bottom:66px}.motion .story-bottom{height:66px;padding-bottom:0}.motion .story-skip{position:static}.motion .story-caption{bottom:76px}
 }
}
@media(max-width:900px){.story{--story-header:72px}.story-copy{grid-template-columns:1fr;padding:30px 24px;gap:38px}.story-topline{padding-inline:24px;font-size:9px}.story-caption{padding-inline:24px}.story-bottom{padding-inline:24px}}

/* Keep supporting story copy readable alongside the display headlines. */
.story .story-topline,.motion .story-topline{font-size:12px;letter-spacing:.075em}
.story .chapter-label,.motion .chapter-label{font-size:12px}
.story .chapter p,.motion .chapter p{font-size:16px;line-height:1.55}
.story .story-caption,.motion .story-caption{font-size:11px}
.story .story-skip,.motion .story-skip{font-size:15px}
.motion .story-pagination{font-size:14px}
.motion .story-scroll{font-size:12px}
@media(max-width:600px){.motion .story-topline{font-size:11px}.motion .chapter-label{font-size:11px}.motion .chapter p{max-width:29ch}.motion .story-photo{bottom:220px}.motion .story-caption{bottom:196px}.motion .story-skip{font-size:14px}}
@media(max-width:600px) and (max-height:700px){.motion .chapter p{font-size:14px;bottom:104px;max-width:29ch}.motion .story-photo{top:40%;bottom:165px;aspect-ratio:auto}.motion .story-caption{bottom:155px;font-size:10px}.motion .story-skip{font-size:13px}}
@media(max-width:360px){.motion .chapter h1,.motion .chapter h2{font-size:40px;max-width:calc(100% - 40px)}}
@media(min-width:601px) and (max-height:600px){.motion .chapter p{font-size:14px;width:220px}.motion .story-topline,.motion .chapter-label{font-size:11px}}


/* Reserve real text height before the image, including after browser zoom.
   All three chapters share a grid cell so the longest one defines the track. */
@media (prefers-reduced-motion:no-preference) {
 .motion .story-stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(60px,1fr) auto;min-height:0;--story-gutter:clamp(20px,4vw,56px)}
 .motion .story-topline{position:static;grid-area:1/1;padding:20px var(--story-gutter) 0;align-items:start}
 .motion .story-copy{position:relative;inset:auto;grid-area:2/1;display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:24px var(--story-gutter);min-width:0}
 .motion .chapter{position:relative;inset:auto;grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) 230px;grid-template-rows:auto 1fr;gap:12px 32px;min-width:0;align-items:start}
 .motion .chapter h1,.motion .chapter h2{position:static;grid-area:1/1/3/2;font-size:clamp(36px,min(4.5vw,8svh),60px);max-width:none;min-width:0;color:var(--brand-gray);overflow-wrap:anywhere}
 .motion .chapter-label{position:static;grid-area:1/2;margin:8px 0 0}
 .motion .chapter p{position:static;grid-area:2/2;width:auto;max-width:none;font-size:16px;margin:0}
 .motion .story-photo{position:relative;inset:auto;grid-area:3/1;aspect-ratio:auto;min-height:0;height:auto}
 .motion .story-caption{position:relative;inset:auto;grid-area:3/1;align-self:end;justify-self:start;margin:12px var(--story-gutter);padding:4px 9px;background:#404040d9;color:#ffffff}
 .motion .story-bottom{position:relative;inset:auto;grid-area:4/1;height:auto;min-height:86px;padding:18px var(--story-gutter);flex-wrap:wrap;gap:16px}
 .motion .story-skip{position:static}
 @media(max-width:900px){
  .motion .story-copy{padding-block:18px}
  .motion .chapter{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:10px}
  .motion .chapter-label{grid-area:1/1;margin:0}
  .motion .chapter h1,.motion .chapter h2{grid-area:2/1;font-size:clamp(30px,min(8.5vw,7.5svh),44px)}
  .motion .chapter p{grid-area:3/1;font-size:16px}
  .motion .story-bottom{min-height:96px;padding-block:12px}
  .motion .story-skip{order:3;flex-basis:100%;font-size:14px}
  .motion .story-scroll{margin-left:auto}
 }
 @media(max-height:650px){
  .motion .story-topline{padding-top:12px;font-size:11px}
  .motion .story-copy{padding-block:14px}
  .motion .chapter{gap:8px 24px}
  .motion .chapter h1,.motion .chapter h2{font-size:clamp(28px,min(7vw,7svh),40px)}
  .motion .chapter-label{font-size:11px}
  .motion .chapter p{font-size:14px}
  .motion .story-bottom{min-height:74px;padding-block:10px;gap:8px}
  .motion .story-caption{font-size:10px;margin-block:8px}
 }
}
/* A very short zoomed viewport needs normal document flow to keep all content reachable. */
@media(max-height:449px),(max-width:279px){
 .story-copy{grid-template-columns:1fr;padding:24px;gap:32px}
 .story-topline{padding:18px 24px;flex-wrap:wrap}
 .story-caption,.story-bottom{padding-inline:24px}
 .chapter h1,.chapter h2{overflow-wrap:anywhere}
}