/* The Lens: a photographic essay about attention. All prints keep their full image. */
.ch-lens{--lens:#00A3EF;--lens-text:#096283;--lens-rule:#dfe6e9}
.ch-lens .bgdots{display:none}
.lens-editorial{position:relative;isolation:isolate}
.lens-opening{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);align-items:center;gap:3vw;max-width:1640px;min-height:calc(100svh - var(--hb));margin:0 auto;padding:50px clamp(24px,5.4vw,90px) 38px}
.lens-kicker{display:flex;align-items:center;gap:12px;margin:0 0 28px;font:500 13px/1.5 var(--text);letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
html[dir=rtl] .lens-kicker{font-family:var(--ar-text);letter-spacing:0;text-transform:none;font-size:15px}
.lens-point{height:10px;width:10px;background:var(--lens);border-radius:50%;flex:none}
.lens-opening h1{font-size:clamp(54px,5.9vw,94px);line-height:1.02;letter-spacing:-.045em;max-width:9ch}
.lens-opening h1 em{font-weight:450;color:var(--ink)}
html[dir=rtl] .lens-opening h1{font-size:clamp(50px,5.8vw,88px);line-height:1.25;letter-spacing:0;max-width:10ch}
.lens-intro{font-size:clamp(17px,1.35vw,21px);line-height:1.7;max-width:31ch;margin:28px 0 0}
.lens-enter{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;text-decoration:none;border-bottom:1px solid var(--ink);padding:16px 0;min-height:48px;font-size:15px;margin-top:28px}
.lens-enter span{font-size:23px;transition:transform .3s var(--ease-out)}
.lens-enter:hover span{transform:translateY(3px)}
.lens-attention{min-width:0;perspective:1200px;perspective-origin:50% 45%;position:relative;padding:4px 0 0;touch-action:pan-y}
.lens-spatial{position:relative;height:clamp(390px,41vw,600px);transform-style:preserve-3d;transform:rotateX(var(--look-y,0deg)) rotateY(var(--look-x,0deg));transition:transform .7s cubic-bezier(.16,1,.3,1);direction:ltr}
.lens-plane{position:absolute;margin:0;width:51%;left:13%;top:7%;transform-style:preserve-3d;backface-visibility:hidden;transition:transform 1.35s cubic-bezier(.2,.8,.12,1),opacity .6s;transform-origin:50% 70%}
.lens-plane-paper{padding:9px;background:#fff;border:1px solid #d8d9d4}
.lens-plane img{display:block;width:100%;height:auto;max-height:440px;object-fit:contain}
.lens-plane .view-trigger::after{opacity:0}
.lens-plane .view-trigger:focus-visible::after,.lens-plane .view-trigger:hover::after{opacity:1}
.lens-plane figcaption{display:flex;gap:14px;align-items:baseline;font-size:13px;line-height:1.4;padding-top:13px;color:var(--ink);text-align:start;direction:inherit}
.lens-plane figcaption>span{font-size:11px;letter-spacing:.08em;color:var(--lens-text)}
.plane-scene{transform:translate3d(-5%,0,72px) rotateY(-13deg) rotateZ(-3deg);z-index:2}
.plane-detail{left:39%;top:18%;width:43%;transform:translate3d(6%,4%,-140px) rotateY(20deg) rotateZ(4deg);z-index:1}
.lens-attention.is-close .plane-scene{transform:translate3d(-23%,5%,-160px) rotateY(-24deg) rotateZ(-5deg);z-index:1}
.lens-attention.is-close .plane-detail{transform:translate3d(-15%,-6%,90px) rotateY(6deg) rotateZ(1deg);z-index:2}
.lens-depth-dots{position:absolute;inset:2% 0 4%;transform:translate3d(0,0,-220px) rotateY(-12deg);transform-style:preserve-3d;pointer-events:none;transition:transform 1.35s cubic-bezier(.2,.8,.12,1)}
.lens-depth-dots i{position:absolute;left:var(--x);top:var(--y);height:5px;width:5px;border-radius:50%;background:var(--lens);transform:translateZ(calc((var(--i) - 24)*3px));transition:transform 1.35s cubic-bezier(.2,.8,.12,1);opacity:.55}
.lens-depth-dots i:nth-child(6n){width:11px;height:11px;opacity:1}
.lens-depth-dots i:nth-child(9n){width:20px;height:20px;opacity:1}
.lens-attention.is-close .lens-depth-dots{transform:translate3d(-2%,2%,-80px) rotateY(13deg)}
.lens-focus-controls{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 6px 0;border-top:1px solid var(--lens-rule);margin-top:12px;background:#fff}
.lens-focus-controls p{font-size:14px;line-height:1.5;margin:0;max-width:23ch}
.lens-focus-controls button{display:flex;align-items:center;gap:10px;border:1px solid var(--ink);border-radius:50px;background:#fff;color:var(--ink);padding:11px 18px;min-height:48px;font:500 14px/1.2 var(--text);white-space:nowrap}
html[dir=rtl] .lens-focus-controls button{font-family:var(--ar-text)}
.focus-dot{display:inline-block;flex:none;width:9px;height:9px;background:var(--lens);border-radius:50%;transition:transform .6s var(--ease-out)}
.lens-focus-controls button[aria-pressed=true] .focus-dot{transform:scale(1.5)}
.lens-wayfinding{display:flex;align-items:center;justify-content:center;gap:clamp(22px,6vw,95px);padding:19px 20px;border-block:1px solid var(--lens-rule);position:sticky;top:var(--hb);z-index:20;background:#fff}
.lens-wayfinding a{display:flex;align-items:center;gap:11px;min-height:44px;color:var(--ink);text-decoration:none;font:500 16px/1.3 var(--text);position:relative}
html[dir=rtl] .lens-wayfinding a{font-family:var(--ar-text)}
.lens-nav-dot{width:8px;height:8px;background:var(--lens);border-radius:50%;transition:transform .4s var(--ease-out);flex:none}
.lens-nav-number{font-size:12px;color:var(--muted)}
.lens-wayfinding a[aria-current] .lens-nav-dot{transform:scale(1.7);outline:1px solid var(--lens);outline-offset:4px}
.lens-wayfinding a[aria-current]>span:last-child{text-decoration:underline;text-underline-offset:6px}
.lens-story{max-width:1440px;margin:0 auto;padding:clamp(64px,9vw,135px) clamp(24px,6.5vw,100px) 0;scroll-margin-top:calc(var(--hb) + 112px)}
.lens-story-heading{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.7fr);gap:12px 8vw;align-items:end;margin-bottom:clamp(36px,5vw,76px)}
.lens-story-heading .lens-kicker{grid-column:1/-1;margin-bottom:14px}
.lens-chapter-dot{width:42px;height:42px;display:grid;place-items:center;flex:none;border:1px solid var(--lens);border-radius:50%;font-size:12px;color:var(--ink);letter-spacing:0}
.lens-story-heading h2{font-size:clamp(48px,6vw,86px);line-height:1.04;letter-spacing:-.035em}
html[dir=rtl] .lens-story-heading h2{letter-spacing:0;line-height:1.3}
.lens-story-heading>p:last-child{font-size:18px;line-height:1.75;max-width:33ch;margin:0 0 5px;color:var(--muted)}
.lens-sequence{display:grid;grid-template-columns:1.12fr .7fr;gap:clamp(36px,6vw,84px) clamp(32px,8vw,124px);align-items:start}
.lens-print{margin:0;min-width:0}
.lens-paper{position:relative}
.lens-paper img{display:block;width:100%;height:auto}
.lens-print figcaption{display:flex;gap:14px;align-items:baseline;padding-top:15px;font-size:14px;line-height:1.55;color:var(--muted);max-width:42ch}
.print-number{font-size:12px;letter-spacing:.03em;color:var(--lens-text);flex:none}
.lens-sequence .print-1{grid-row:span 2}
.lens-sequence .print-2{margin-top:28%}
.lens-sequence .print-3{grid-column:2}
.lens-sequence .print-4{grid-column:1/-1;width:65%;margin:12px auto 0}
.story-seasons .print-1{align-self:start}
.story-seasons .print-3{width:130%;margin-inline-start:-30%}
.story-flowers .lens-sequence{grid-template-columns:.8fr 1.1fr}
.story-flowers .print-1{grid-column:2;grid-row:1/span 2}
.story-flowers .print-2{grid-column:1;grid-row:1;margin-top:35%}
.story-flowers .print-3{grid-column:1;grid-row:2;width:75%;margin-inline-start:auto}
.story-flowers .print-4{width:44%;margin-top:14px}
.story-water .print-4{width:44%}
.lens-archive{margin-top:clamp(48px,7vw,100px);border-top:1px solid var(--ink);border-bottom:1px solid var(--lens-rule)}
.lens-archive summary{display:flex;align-items:center;gap:20px;min-height:78px;list-style:none;font-size:16px;font-weight:500}
.lens-archive summary::-webkit-details-marker{display:none}
.archive-count{margin-inline-start:auto;font-size:13px;color:var(--muted)}
.archive-plus{font-size:27px;font-weight:400;transition:transform .3s}
.lens-archive[open] .archive-plus{transform:rotate(45deg)}
.lens-contact-sheet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px;padding:10px 0 36px;align-items:start}
.lens-contact-sheet .lens-paper{background:#f6f7f7;display:flex;align-items:center;justify-content:center;aspect-ratio:3/4}
.lens-contact-sheet .view-trigger{height:100%;width:100%}
.lens-contact-sheet img{height:100%;width:100%;object-fit:contain}
.lens-contact-sheet figcaption{font-size:12px;gap:8px}
.lens-colophon{max-width:1120px;padding:clamp(80px,12vw,170px) 30px;margin:auto;display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);align-items:center;gap:clamp(36px,8vw,110px)}
.lens-author-image{width:100%;transform:rotate(-2deg)}
.lens-author-image img{width:100%;height:auto}
.lens-colophon h2{font-size:clamp(38px,4.5vw,64px);line-height:1.1;max-width:12ch}
html[dir=rtl] .lens-colophon h2{line-height:1.35}
.lens-colophon p:not(.lens-kicker){max-width:35ch;font-size:18px;line-height:1.7;margin:26px 0 0}
.lens-editorial a:focus-visible,.lens-editorial button:focus-visible,.lens-editorial summary:focus-visible{outline:3px solid var(--lens-text);outline-offset:5px}
html:not(.js) .lens-focus-controls button{display:none}
html:not(.js) .lens-spatial{display:grid;grid-template-columns:1fr 1fr;height:auto;gap:20px;transform:none}
html:not(.js) .lens-plane{position:static;width:100%;transform:none}
html:not(.js) .lens-depth-dots{display:none}
@media(min-width:1600px){.lens-plane img{max-height:490px}.lens-spatial{height:650px}}
@media(max-width:1000px){
 .lens-opening{grid-template-columns:1fr 1.1fr;gap:0;padding-inline:30px}
 .lens-opening h1{font-size:clamp(48px,6.5vw,70px)}
 .lens-spatial{height:390px}
 .lens-focus-controls{flex-direction:column;align-items:start}
 .lens-focus-controls p{max-width:none}
 .lens-story-heading{gap:24px}
 .lens-story-heading>p:last-child{font-size:17px}
}
@media(max-width:760px){
 .lens-opening{display:flex;flex-direction:column;align-items:stretch;padding:36px 22px 30px;min-height:0;gap:26px}
 .lens-opening-copy{position:relative;z-index:3}
 .lens-kicker{font-size:12px;margin-bottom:20px;letter-spacing:.045em}
 .lens-opening h1{font-size:clamp(45px,10.2vw,72px);max-width:12ch}
 html[dir=rtl] .lens-opening h1{font-size:clamp(42px,10vw,66px);max-width:none}
 .lens-intro{font-size:17px;line-height:1.65;max-width:34ch;margin:20px 0 0}
 .lens-opening-copy .lens-enter{font-size:14px;margin-top:6px;padding:12px 0}
 .lens-attention{margin-inline:-8px;perspective:900px}
 .lens-spatial{height:clamp(320px,89vw,520px)}
 .lens-plane{width:54%;left:9%;top:7%}
 .plane-detail{width:46%;left:42%;top:19%}
 .plane-scene{transform:translate3d(0,0,40px) rotateY(-10deg) rotateZ(-3deg)}
 .plane-detail{transform:translate3d(0,0,-70px) rotateY(14deg) rotateZ(4deg)}
 .lens-attention.is-close .plane-scene{transform:translate3d(-12%,4%,-90px) rotateY(-17deg) rotateZ(-4deg)}
 .lens-attention.is-close .plane-detail{transform:translate3d(-19%,-3%,50px) rotateY(4deg)}
 .lens-plane figcaption{font-size:12px;gap:8px}
 .lens-focus-controls{flex-direction:row;align-items:center;padding:16px 8px 0;gap:10px}
 .lens-focus-controls p{font-size:13px;max-width:16ch}
 .lens-focus-controls button{padding:10px 13px;font-size:13px}
 .lens-depth-dots{inset:4% 2%}
 .lens-wayfinding{gap:0;justify-content:space-around;padding:7px 12px;top:var(--hb);min-height:60px}
 .lens-wayfinding a{gap:8px;font-size:14px}
 .lens-nav-number{font-size:11px}
 .lens-nav-dot{width:6px;height:6px}
 .lens-story{padding:64px 22px 0;scroll-margin-top:calc(var(--hb) + 80px)}
 .lens-story-heading{display:block;margin-bottom:30px}
 .lens-story-heading .lens-kicker{margin-bottom:22px}
 .lens-chapter-dot{width:34px;height:34px}
 .lens-story-heading h2{font-size:clamp(42px,10.5vw,65px)}
 .lens-story-heading>p:last-child{margin-top:22px;max-width:34ch;font-size:17px}
 .lens-sequence,.story-flowers .lens-sequence{display:grid;grid-template-columns:minmax(0,1fr);gap:34px}
 .lens-sequence .lens-print,.story-flowers .lens-sequence .lens-print{grid-column:auto;grid-row:auto;width:100%;margin:0}
 .lens-sequence .print-2,.story-flowers .lens-sequence .print-2{width:80%;margin-inline-start:auto}
 .lens-sequence .print-4,.story-flowers .lens-sequence .print-4{width:88%;margin-inline:auto}
 .lens-print figcaption{font-size:13px;gap:10px;padding-top:12px}
 .lens-archive{margin-top:40px}
 .lens-archive summary{min-height:66px;font-size:14px;gap:12px}
 .lens-contact-sheet{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
 .lens-contact-sheet figcaption{display:block;font-size:12px}
 .lens-contact-sheet .print-number{display:block;margin-bottom:4px}
 .lens-colophon{grid-template-columns:minmax(0,1fr);gap:32px;padding:80px 28px}
 .lens-author-image{width:58%;max-width:300px;margin:auto}
 .lens-colophon h2{font-size:45px;max-width:13ch}
 .lens-colophon p:not(.lens-kicker){font-size:17px}
}
@media(prefers-reduced-motion:reduce){
 .lens-spatial{transform:none!important}
 .lens-plane,.lens-depth-dots,.lens-depth-dots i{transition:none!important}
}

html[dir=rtl] .lens-plane figcaption{direction:rtl}

/* The blue dot is a focus control. The photographs move only by invitation. */
.lens-attention{--focus:0}
.lens-spatial{transform:none;transition:none}
.lens-attention .plane-scene{transform:translate3d(calc(-5% - var(--focus)*18%),calc(var(--focus)*5%),calc(72px - var(--focus)*232px)) rotateY(calc(-13deg - var(--focus)*11deg)) rotateZ(calc(-3deg - var(--focus)*2deg))}
.lens-attention .plane-detail{transform:translate3d(calc(6% - var(--focus)*21%),calc(4% - var(--focus)*10%),calc(-140px + var(--focus)*230px)) rotateY(calc(20deg - var(--focus)*14deg)) rotateZ(calc(4deg - var(--focus)*3deg))}
.lens-attention .lens-depth-dots{transform:translate3d(calc(var(--focus)*-2%),calc(var(--focus)*2%),calc(-220px + var(--focus)*140px)) rotateY(calc(-12deg + var(--focus)*25deg))}
.lens-attention.is-scrubbing .lens-plane,.lens-attention.is-scrubbing .lens-depth-dots{transition:none}
.lens-focus-rail{position:relative;padding:12px 8px 0;z-index:5}
.lens-focus-rail label{display:block;font-size:13px;line-height:1.5;margin-bottom:4px}
.lens-focus-rail input{appearance:none;-webkit-appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;color:var(--lens);cursor:ew-resize;touch-action:pan-y;direction:ltr}
.lens-focus-rail input::-webkit-slider-runnable-track{height:1px;background:var(--lens-text)}
.lens-focus-rail input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--lens);border:3px solid white;outline:1px solid var(--lens-text);margin-top:-10px}
.lens-focus-rail input::-moz-range-track{height:1px;background:var(--lens-text)}
.lens-focus-rail input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--lens);border:3px solid white;outline:1px solid var(--lens-text)}
.lens-focus-rail input:focus-visible{outline:2px solid var(--lens-text);outline-offset:3px;border-radius:4px}
.lens-range-ends{display:flex;justify-content:space-between;gap:20px;font-size:12px;line-height:1.5;direction:ltr;color:var(--lens-text)}
html[dir=rtl] .lens-range-ends span{direction:rtl}
.lens-focus-controls{margin-top:18px;padding-top:16px}
html:not(.js) .lens-focus-rail{display:none}
html:not(.js) .lens-attention .lens-plane{transform:none}
@media(max-width:760px){
 .lens-attention .plane-scene{transform:translate3d(calc(var(--focus)*-12%),calc(var(--focus)*4%),calc(40px - var(--focus)*130px)) rotateY(calc(-10deg - var(--focus)*7deg)) rotateZ(calc(-3deg - var(--focus)*1deg))}
 .lens-attention .plane-detail{transform:translate3d(calc(var(--focus)*-19%),calc(var(--focus)*-3%),calc(-70px + var(--focus)*120px)) rotateY(calc(14deg - var(--focus)*10deg)) rotateZ(calc(4deg - var(--focus)*4deg))}
 .lens-focus-rail{padding-inline:8px}
}
@media(prefers-reduced-motion:reduce){
 .lens-attention .lens-plane,.lens-attention .lens-depth-dots{transition:none}
}