/* A scroll chapter presenting four Paymachi captures in three gallery steps. */
.landing-story .clarity{grid-template-columns:minmax(0,1fr);background:#eef2ea;color:#193428;padding-block:clamp(88px,9vw,132px)}
.landing-story .clarity-heading{position:static;top:auto;max-width:760px}
.landing-story .clarity-heading .chapter-label{color:#376747}
.landing-story .clarity-heading h2{color:#193428}
.landing-story .clarity-heading>p:last-of-type{max-width:560px;margin-top:22px;color:#54695a;font-size:clamp(16px,1.35vw,19px);line-height:1.55}
.reel{width:100%;max-width:1320px;height:420svh;min-height:2900px;margin:clamp(48px,6vw,84px) auto 0;padding-top:clamp(36px,4vw,54px);border-top:1px solid #c8d4c6;color:#193428}
.reel-sticky{position:sticky;top:clamp(24px,6vh,68px)}
.reel-stage{display:grid;grid-template-columns:minmax(260px,.37fr) minmax(0,.63fr);gap:clamp(40px,7vw,120px);align-items:center}
.reel-details{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.reel-meta{width:100%;min-height:160px}
.reel-caption{display:none}
.reel-caption.is-active{display:block;animation:reel-copy-in .36s ease both}
.reel-caption h3{font-family:'Playfair Display',Georgia,serif;font-size:clamp(31px,3.2vw,46px);font-weight:500;line-height:1.12;letter-spacing:-.025em;color:#193428;max-width:12ch}
.reel-caption p{max-width:35ch;margin-top:20px;font-size:16px;line-height:1.6;color:#53685a}
.reel-frame{position:relative;min-width:0;width:100%;height:565px}
.reel-slide{position:absolute;top:50%;left:50%;margin:0;overflow:hidden;border-radius:20px;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-50%) translateY(18px) scale(.985);box-shadow:0 28px 64px -40px #1c3c2859,0 0 0 1px #1934281c;transition:opacity .3s ease,transform .42s cubic-bezier(.2,.7,.2,1),visibility .3s}
.reel-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%);z-index:1}
.reel-shot a{display:block;width:100%;height:100%;cursor:zoom-in}
.reel-shot img{display:block;width:100%;height:100%;object-fit:cover}
.reel-shot-clock{width:min(100%,620px);aspect-ratio:1.1;background:#17140f}
.reel-shot-pair{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;width:min(100%,650px);height:565px;overflow:visible;border-radius:0;box-shadow:none}
.reel-shot-pair a{height:auto;overflow:hidden;border-radius:16px;background:#17140f;box-shadow:0 24px 50px -35px #1c3c2866,0 0 0 1px #1934281c}
.reel-shot-pair .reel-pair-shift{width:min(100%,347px);aspect-ratio:.94}
.reel-shot-pair .reel-pair-math{width:min(100%,620px);aspect-ratio:3.38}
.reel-shot-plan{width:min(100%,860px);aspect-ratio:1.57;background:#f3f1e8}
.reel-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-top:clamp(30px,4vw,55px)}
.reel-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,910px)}
.reel-nav button{min-width:0;padding:17px 14px 3px 0;border:0;border-top:2px solid #bdcbbd;background:transparent;color:#65796b;text-align:left;font-size:14px;font-weight:600;line-height:1.35;transition:color .2s,border-color .2s}
.reel-nav button:hover{color:#24583a}
.reel-nav button.is-active{border-top-color:#24583a;color:#193428}
.reel-nav button span{display:block;margin-bottom:8px;font-size:11px;font-weight:650;letter-spacing:.09em;font-variant-numeric:tabular-nums;color:#6d8971}
.reel-nav button.is-active span{color:#24583a}
@keyframes reel-copy-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:860px){
 .landing-story .clarity{padding-block:78px 88px}
 .reel{height:430svh;min-height:3200px;margin-top:52px;padding-top:32px}
 .reel-sticky{top:18px}
 .reel-stage{display:flex;flex-direction:column;align-items:stretch;gap:22px}
 .reel-details{min-height:140px}
 .reel-meta{min-height:0}
 .reel-caption h3{font-size:clamp(30px,6.8vw,42px);max-width:18ch}
 .reel-caption p{margin-top:12px;max-width:48ch;font-size:15px}
 .reel-frame{height:min(50svh,500px)}
 .reel-shot-clock{width:min(100%,49.5svh,517px)}
 .reel-shot-pair{height:100%}
 .reel-shot-pair .reel-pair-shift{width:min(100%,24svh,240px)}
 .reel-shot-pair .reel-pair-math{width:min(100%,60svh,620px)}
 .reel-shot-plan{width:min(100%,78svh,780px)}
 .reel-bottom{display:block;margin-top:22px}
 .reel-nav{width:100%}
 .reel-nav button{font-size:12px;padding-right:9px}
}
@media(max-width:520px){
 .reel{height:450svh;min-height:3300px}
 .reel-details{display:block;min-height:170px}
 .reel-caption h3{font-size:29px}
 .reel-caption p{font-size:14px;line-height:1.45}
 .reel-frame{height:min(50svh,440px)}
 .reel-shot-clock{width:min(100%,45.1svh,429px)}
 .reel-shot-pair .reel-pair-shift{width:min(100%,29svh,255px)}
 .reel-shot-plan{width:min(100%,78svh,690px)}
 .reel-slide{border-radius:14px}
 .reel-bottom{margin-top:20px}
 .reel-nav button{font-size:11px;line-height:1.3}
}
@media(prefers-reduced-motion:reduce){.reel-slide,.reel-nav button{transition:none}.reel-caption.is-active{animation:none}}
