/* Finite skyline trace. Artwork is complete without JavaScript. */
main>section:first-child{padding-bottom:48px!important}
.sd-skyline{background:#FBF8F1;padding:0 clamp(20px,5vw,56px);overflow:hidden}
.sd-caption{max-width:1168px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#1F4B63}
.sd-caption p{font:400 clamp(20px,2vw,28px)/1.2 Gloock,Georgia,serif;margin:0}
.sd-replay{min-height:44px;border:0;border-bottom:1px solid #C5D7D9;background:transparent;color:#1F4B63;font:500 14px "Albert Sans",sans-serif;padding:0 4px;cursor:pointer;display:none;gap:8px;align-items:center;white-space:nowrap}
.sd-ready .sd-replay{display:inline-flex}.sd-replay span{font-size:23px}.sd-replay:hover{border-color:#1F4B63}
.sd-viewport{max-width:1440px;margin:0 auto}.sd-art{width:100%;height:auto;display:block;overflow:visible}
.sd-glint{opacity:0}.sd-detail{opacity:.48}.sd-reflections{opacity:.32}.sd-sun-ring{opacity:.5}.sd-boat{opacity:.7}
.sd-pending .sd-trace,.sd-running .sd-trace{stroke-dasharray:1;stroke-dashoffset:1}
.sd-pending .sd-detail,.sd-pending .sd-sun-fill,.sd-pending .sd-sun-ring,.sd-pending .sd-wash,.sd-pending .sd-water,.sd-pending .sd-reflections,.sd-pending .sd-boat{opacity:0}
.sd-running .sd-trace{animation:sd-draw 3.4s cubic-bezier(.3,.1,.3,1) both}
.sd-running .sd-glint{stroke-dasharray:.025 .975;animation:sd-pen 3.4s cubic-bezier(.3,.1,.3,1) both}
.sd-running .sd-detail{animation:sd-details 1.4s 2.3s both}
.sd-running .sd-sun-ring{stroke-dasharray:1;animation:sd-draw 1.1s 2.4s both}
.sd-running .sd-sun-fill{transform-origin:832px 112px;animation:sd-sun 1.5s 2.7s both}
.sd-running .sd-wash,.sd-running .sd-water{animation:sd-color 1s 3.1s both}
.sd-running .sd-reflections{animation:sd-reflect 1s 3.3s both}
.sd-running .sd-boat{animation:sd-boat .8s 3.5s both}
@keyframes sd-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sd-pen{0%{stroke-dashoffset:1;opacity:0}3%{opacity:1}90%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes sd-details{from{opacity:0}to{opacity:.48}}
@keyframes sd-color{from{opacity:0}to{opacity:1}}
@keyframes sd-sun{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
@keyframes sd-reflect{from{opacity:0;transform:translateY(-3px)}to{opacity:.32;transform:none}}
@keyframes sd-boat{from{opacity:0;transform:translateX(-8px)}to{opacity:.7;transform:none}}
.sd-held *{animation-play-state:paused!important}
@media(max-width:839px){.sd-skyline{padding:8px 20px 0}.sd-caption{gap:12px}.sd-caption p{font-size:21px}.sd-art{width:180%;max-width:none;margin-left:-40%}.sd-viewport{overflow:hidden}.sd-replay{font-size:12px}.sd-replay span{font-size:20px}}
@media(prefers-reduced-motion:reduce){.sd-skyline *{animation:none!important;transform:none!important}.sd-trace,.sd-sun-ring{stroke-dasharray:none!important;stroke-dashoffset:0!important}.sd-replay{display:none!important}.sd-pending .sd-detail{opacity:.48}.sd-pending .sd-sun-fill,.sd-pending .sd-wash,.sd-pending .sd-water{opacity:1}.sd-pending .sd-sun-ring{opacity:.5}.sd-pending .sd-reflections{opacity:.32}.sd-pending .sd-boat{opacity:.7}}

/* Continuous water; the visitor can pause independently of the finite trace. */
.sd-controls{display:flex;gap:20px;align-items:center}.sd-wave-toggle{display:none;min-height:44px;border:0;border-bottom:1px solid #C5D7D9;background:none;color:#1F4B63;font:500 14px "Albert Sans",sans-serif;padding:0 4px;cursor:pointer;white-space:nowrap}.sd-ready .sd-wave-toggle{display:inline-block}.sd-wave-toggle:hover{border-color:#1F4B63}
.sd-waves{opacity:.3}.sd-ready .sd-waves{opacity:0}.sd-water-live .sd-waves{opacity:.3;transition:opacity .7s}.sd-ready .sd-wave-line{animation:sd-wave-drift 12s linear infinite}.sd-ready .sd-wave-b{animation-duration:17s;animation-direction:reverse;opacity:.65}.sd-ready .sd-wave-c{animation-duration:14s;opacity:.4}.sd-water-paused .sd-wave-line{animation-play-state:paused!important}
@keyframes sd-wave-drift{from{transform:translateX(0)}to{transform:translateX(-200px)}}
@media(max-width:600px){.sd-caption{flex-wrap:wrap;gap:8px}.sd-controls{gap:20px}.sd-wave-toggle{font-size:12px}}
@media(prefers-reduced-motion:reduce){.sd-wave-toggle{display:none!important}.sd-ready .sd-waves{opacity:.3!important}.sd-ready .sd-wave-line{animation:none!important}}
.sd-controls{gap:14px}.sd-replay,.sd-wave-toggle{font-size:10px!important;letter-spacing:.01em;border-bottom:0;color:#496879;padding:0 2px}.sd-replay span{font-size:14px!important}.sd-replay:hover,.sd-wave-toggle:hover{text-decoration:underline;color:#1F4B63}@media(max-width:600px){.sd-caption{align-items:center}.sd-controls{gap:12px}}