﻿/* Native scroll, generous editorial proportions. */
.project-book.scroll-book{display:block;padding:0;overflow-y:auto;overflow-x:hidden;background:#f7f7ef;scrollbar-width:thin;scrollbar-color:#b5ae9b #f7f7ef;overscroll-behavior:contain;touch-action:pan-y}
.flow-topline{position:sticky;top:0;display:flex;justify-content:space-between;padding:20px 48px;border-bottom:1px solid #1d1d1b20;font-size:15px;color:#716c61;background:#f7f7eff5;z-index:4}
.scroll-flow{position:relative;overflow:visible}
.flow-heading{padding:48px 48px 36px;position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.scroll-book .flow-heading h2{font-size:76px;line-height:1;letter-spacing:-3.5px;margin:0;max-width:78%;overflow-wrap:break-word}
.flow-heading>a{font-size:17px;line-height:1.4;text-decoration:underline;text-underline-offset:5px;max-width:150px;flex-shrink:0}
.flow-figure{margin:24px 48px 64px;min-width:0;position:relative;transform:translateY(calc(var(--enter,0)*36px + var(--drift,0px)));opacity:calc(1 - var(--enter,0)*.35)}
.flow-art{overflow:hidden;background:#eeece2}.flow-art a{display:block}.flow-art img,.flow-art video{display:block;width:100%;height:auto;object-fit:contain}.flow-art video{background:#1d1d1b;min-height:220px;max-height:740px}
.flow-figure[data-format="portrait"] .flow-art img{max-height:780px}
.flow-figure figcaption{font-size:15px;line-height:1.5;color:#716c61;padding:14px 0 0}
.flow-figure.flow-cover{margin:0 48px 56px;transform:translateY(var(--drift,0px));opacity:1}.flow-cover .flow-art img{max-height:620px}
.flow-copy{margin:0 48px;padding:42px 0 54px;border-top:1px solid #1d1d1b20;display:grid;grid-template-columns:220px minmax(0,1fr);gap:44px;position:relative;transform:translateY(calc(var(--enter,0)*24px));opacity:calc(1 - var(--enter,0)*.25)}
.scroll-book .flow-copy h3{font-size:26px;line-height:1.2;letter-spacing:-.6px;margin:3px 0 0;color:#1d1d1b;font-weight:700}.scroll-book .flow-copy p{font-size:22px;line-height:1.65;margin:0;max-width:58ch;color:#49483f}.flow-copy p:only-child{grid-column:2}
.flow-gallery{position:relative;margin:8px 0 70px}
.scroll-book .flow-gallery-title{margin:0 48px;padding:28px 0 24px;font-size:38px;font-weight:700;letter-spacing:-1.2px;color:#1d1d1b;border-top:1px solid #1d1d1b20}
.flow-composition{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;padding:0 48px;align-items:start}
.flow-composition .flow-figure{margin:0;grid-column:1/-1}.flow-composition .flow-figure[data-format="portrait"],.flow-composition .flow-figure[data-format="square"]{grid-column:auto}
.flow-composition .flow-figure:last-child:nth-child(odd){grid-column:1/-1}.flow-composition .flow-figure:last-child:nth-child(odd) img{max-height:740px}
.flow-grid{margin:28px 0 70px}.flow-aside{padding-bottom:40px}.flow-aside .flow-copy{padding-bottom:32px}
.flow-track{position:sticky;bottom:0;z-index:5;height:3px;background:#ddd9c9;overflow:hidden}.flow-track span{display:block;width:100%;height:100%;background:#d36135;transform-origin:left;transform:scaleX(0)}
.flow-end{margin:30px 48px 0;padding:42px 0 60px;border-top:1px solid #1d1d1b20;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:21px;line-height:1.3}.flow-back{font:700 16px Satoshi,Arial,sans-serif;border-radius:25px;background:#1d1d1b;color:#f7f7ef;padding:14px 22px;cursor:pointer}
@media(max-width:600px){.flow-topline{font-size:21px;padding:24px 32px}.flow-heading{padding:38px 32px 30px;display:block}.scroll-book .flow-heading h2{font-size:66px;max-width:100%;letter-spacing:-2.5px}.flow-heading>a{display:inline-block;font-size:25px;max-width:none;margin-top:20px}.flow-figure,.flow-figure.flow-cover{margin-inline:32px}.flow-copy{margin-inline:32px;display:block;padding:32px 0 44px}.scroll-book .flow-copy h3{font-size:34px;margin:0 0 20px}.scroll-book .flow-copy p{font-size:28px;line-height:1.55}.flow-composition{padding-inline:32px;gap:26px 18px}.scroll-book .flow-gallery-title{margin-inline:32px;font-size:40px}.flow-figure figcaption{font-size:22px}.flow-end{margin-inline:32px;align-items:flex-start;flex-direction:column;font-size:29px}.flow-back{font-size:24px}}
@media(prefers-reduced-motion:reduce){.flow-figure,.flow-copy,.flow-heading{transform:none!important;opacity:1!important}}
