.light-story{background:#11110f;color:#f3efe7;padding:0;position:relative;isolation:isolate;scroll-margin-top:var(--nav-h)}
.light-story-head{position:absolute;top:clamp(16px,2vw,36px);right:clamp(16px,3vw,56px);z-index:2;display:flex;justify-content:flex-end;pointer-events:none;background:none;padding:0}
.light-story-label{font:400 11px/1.8 var(--sans);letter-spacing:.22em;text-transform:uppercase;margin:0;color:#d1c4ad}
.light-control{display:flex;align-items:center;gap:18px;flex:none;pointer-events:auto;filter:drop-shadow(0 1px 3px #000)}
.light-readout{text-align:right;min-width:0}
.light-time{display:block;font:400 17px/1.2 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.025em}
.light-instruction{display:block;margin-top:8px;font:400 10px/1.5 var(--sans);letter-spacing:.1em;color:#c8bdab}
.light-dial{position:relative;display:block;width:88px;height:88px;padding:0;background:none;border:0;border-radius:50%;color:#e7d8ba;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.light-dial.is-dragging{cursor:grabbing}.light-dial:focus-visible{outline:2px solid #e3c998;outline-offset:7px}
.light-dial svg{width:100%;height:100%;display:block;overflow:visible}.light-dial-ring{fill:none;stroke:currentColor;stroke-width:1;opacity:.9}
.light-dial text{fill:currentColor;font:7px Arial,sans-serif;letter-spacing:.04em;text-anchor:middle;dominant-baseline:middle;opacity:.65}
.light-dial-hand{transform:rotate(var(--dial-angle,210deg));transform-origin:50px 50px}.light-dial-hand circle{fill:#e3c998;stroke:#11110f;stroke-width:2}
.light-dial-hand line{stroke:#e3c998;stroke-width:.7;opacity:.45}
.light-visual{position:relative;display:flow-root;width:100%;max-width:none;margin-inline:0;aspect-ratio:1678/937;background:#181713}
.light-art{width:100%;height:auto;aspect-ratio:1678/937;display:block}
.light-copy{position:absolute;left:5vw;right:4vw;bottom:19%;margin:0;font:italic 400 clamp(46px,5.05vw,78px)/1.08 var(--serif);letter-spacing:-.035em;color:#fffaf0;text-shadow:0 2px 24px #0006;pointer-events:none}
.light-copy-line{display:block}.light-word-outside{opacity:var(--copy-outside,0)}.light-word-pass{opacity:var(--copy-pass,0)}
.light-word-inside{display:block;opacity:var(--copy-inside,0);transform:translateY(calc((1 - var(--copy-inside,0))*12px))}
.light-story-foot{padding:22px 5vw 30px;display:flex;justify-content:space-between;gap:20px;color:#b9ac97;font:400 9px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-top:auto}
.light-accessible{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media  (max-width:760px) and (max-device-width:899px), (max-width:760px) and (max-width:599px), (max-device-width:684px) and (min-device-width:900px) and (hover:hover) and (pointer:fine) and (min-width:600px){
 html:not(.ex-optical-desktop) .light-story-head{top:12px;right:14px;padding:0;gap:12px}
 html:not(.ex-optical-desktop) .light-control{gap:10px}html:not(.ex-optical-desktop) .light-readout{min-width:0}html:not(.ex-optical-desktop) .light-time{font-size:14px}html:not(.ex-optical-desktop) .light-instruction{font-size:8px;max-width:105px;letter-spacing:.04em}
 html:not(.ex-optical-desktop) .light-dial{width:69px;height:69px}html:not(.ex-optical-desktop) .light-visual{width:100%;aspect-ratio:auto;background:transparent}html:not(.ex-optical-desktop) .light-art{height:auto;aspect-ratio:1678/937}
 html:not(.ex-optical-desktop) .light-copy{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:22px 6vw 30px;font-size:clamp(28px,6vw,46px);line-height:1.2;letter-spacing:-.04em}
 html:not(.ex-optical-desktop) .light-caption-shade{display:none}html:not(.ex-optical-desktop) .light-story-foot{padding:0 6vw 28px;font-size:8px;letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){.light-word-inside{transform:none}}
/* The original header changes to 64px below 620px; its variable is scoped
   to the header, so these sections need the same local measurement. */
@media  (max-width:620px) and (max-device-width:899px), (max-width:620px) and (max-width:599px), (max-device-width:558px) and (min-device-width:900px) and (hover:hover) and (pointer:fine) and (min-width:600px){html:not(.ex-optical-desktop) .light-story{--nav-h:64px}}

/* Fit the complete photograph below the fixed navigation, using the browser
   viewport rather than the monitor resolution. Preserve the source aspect. */
@media  (min-width:761px) and (max-device-width:899px), (min-width:761px) and (max-width:599px), (orientation:landscape), (min-device-width:685px) and (min-device-width:900px) and (hover:hover) and (pointer:fine) and (min-width:600px){
 html:not(.ex-optical-desktop) .light-visual{width:min(100%,calc((100svh - var(--nav-h)) * 1678 / 937));margin-inline:auto;aspect-ratio:1678/937;container-type:inline-size}
 html:not(.ex-optical-desktop) .light-art{width:100%;height:auto;aspect-ratio:1678/937}
 html:not(.ex-optical-desktop) .light-story-head{top:clamp(10px,2cqw,36px);right:clamp(12px,3cqw,56px)}
 html:not(.ex-optical-desktop) .light-dial{width:clamp(52px,8cqw,88px);height:clamp(52px,8cqw,88px)}
 html:not(.ex-optical-desktop) .light-control{gap:clamp(8px,1.5cqw,18px)}
 html:not(.ex-optical-desktop) .light-time{font-size:clamp(13px,1.6cqw,17px)}
 html:not(.ex-optical-desktop) .light-copy{position:absolute;left:5%;right:4%;top:auto;bottom:19%;margin:0;font-size:clamp(22px,5.05cqw,78px);line-height:1.08;letter-spacing:-.035em}
}