.film{z-index:2;--seg:var(--seg-d,60svh);position:relative}.film-skip{left:var(--gutter);top:calc(var(--head) + 12px);z-index:7;background:var(--ink);color:var(--paper);border-radius:4px;padding:10px 14px;font-weight:600;text-decoration:none;position:absolute}.film-skip:not(:focus){clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;padding:0;overflow:hidden}.film-frames{margin:0;padding:0;list-style:none}.film-stage{position:relative}.film-frames{padding-inline:var(--gutter);max-width:calc(var(--content) + 2 * var(--gutter));gap:clamp(40px,6vw,96px);margin-inline:auto;display:grid}.film-chapter{border-top:1.5px solid var(--fg);padding-top:24px}.fch-lead{color:var(--fg-2);margin-bottom:10px}.fch-date{color:var(--fg-2);margin-top:10px}.film-frame{gap:18px 40px;margin:0;display:grid}.ff-photo{background:var(--ph,#222);border-radius:2px;position:relative;overflow:hidden}.ff-photo img{width:100%;height:auto;display:block}.film-frame.is-extra .ff-photo{max-width:var(--maxw,360px)}.ff-cap{align-content:start;gap:12px;display:grid}.ff-time{color:var(--fg);font-size:clamp(64px,3rem + 4vw,120px)}.ff-text{font-size:var(--fs-body);max-width:46ch;color:var(--body-2);text-wrap:pretty;line-height:1.55}[data-light=night] .ff-text,.ff-extra,.ff-exif{color:var(--fg-2)}@media (width>=1080px){.film-frame{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end}.film-frame.is-port .ff-photo{width:auto;max-height:86vh;aspect-ratio:var(--ar);justify-self:start}.film-frame.is-port .ff-photo img{width:auto;height:100%}}.film-home .film-frames{gap:48px}.film-home .ff-time{font-size:clamp(48px,2rem + 3vw,88px)}.film-clock,.film-sub,.film-count,.film-rulers,.film-bridge,.film-hint,.film-cutout{display:none}.film-end{z-index:2;padding:clamp(56px, 7vw, 112px) var(--gutter);max-width:calc(var(--content) + 2 * var(--gutter));justify-items:start;gap:14px;margin-inline:auto;display:grid;position:relative}.film-end-actions{flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:8px;display:flex}html.js.motion.coarse .film:not(.film-off){--seg:var(--seg-t,45svh)}html.js.motion .film:not(.film-off) .film-pin{height:calc(100vh + var(--units) * var(--seg));contain:paint;position:relative}@supports (height:100svh){html.js.motion .film:not(.film-off) .film-pin{height:calc(100svh + var(--units) * var(--seg))}}html.js.motion .film:not(.film-off) .film-stage{background:var(--bg);height:100svh;color:var(--fg);contain:layout paint;position:sticky;top:0;overflow:hidden}html.js.motion .film:not(.film-off) .film-frames{z-index:1;max-width:none;margin:0;padding:0;display:block;position:absolute;inset:0}html.js.motion .film:not(.film-off) .film-chapter{display:none}html.js.motion .film:not(.film-off) .film-item{pointer-events:none;display:none;position:absolute;inset:0}html.js.motion .film:not(.film-on):not(.film-off) .film-item:nth-child(1 of .film-item),html.js.motion .film:not(.film-off) .film-item.is-shown{display:block}html.js.motion .film:not(.film-off) .film-frame{left:var(--gx,40px);top:var(--gy,84px);width:var(--gw,calc(100% - 80px));height:var(--gh,calc(100% - 234px));background:0 0;margin:0;display:block;position:absolute;overflow:hidden}html.js.motion .film-report:not(.film-off) .film-frame{left:var(--gx,0px);top:var(--gy,0px);width:var(--gw,100%);height:var(--gh,100%)}html.js.motion .film:not(.film-off) .ff-photo{background:var(--ph,#222);transform-origin:var(--fx,50%) var(--fy,50%);border-radius:0;position:absolute;inset:0;max-width:none!important}html.js.motion.fine .film:not(.film-off) .ff-photo{will-change:transform, filter}html.js.motion .film:not(.film-off) .film-frame .ff-photo{aspect-ratio:auto;justify-self:auto;width:auto;max-height:none}html.js.motion .film:not(.film-off) .ff-photo picture,html.js.motion .film:not(.film-off) .film-frame .ff-photo img{width:100%;height:100%;display:block}html.js.motion .film-on .ff-photo img{object-fit:cover;object-position:var(--op,50% 50%)!important}html.js.motion .film:not(.film-off) .ff-photo img{object-fit:cover}html.js.motion .film:not(.film-off) .film-frame.is-contain .ff-photo img{object-fit:contain}html.js.motion .film:not(.film-off) .film-frame.is-contain .ff-photo{background:0 0}html.js.motion .film:not(.film-off) .ff-cap{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;overflow:hidden;position:absolute!important}html.js.motion .film:not(.film-off) .film-frame{scroll-margin-top:calc(-1 * (var(--head) + 16px))}html.js.motion .film:not(.film-off):not(.film-set) :is(.film-clock,.film-sub,.film-hint),html.js.motion .film:not(.film-off):not(.film-set) .film-stage:after{visibility:hidden;animation:0s linear 6s forwards film-net}@keyframes film-net{to{visibility:visible}}html.js.motion .film.film-set:not(.film-off) :is(.film-clock,.film-sub){animation:film-in .28s var(--ease-out) backwards}@keyframes film-in{0%{opacity:0}}html.js.motion .film:not(.film-off) .film-cutout{z-index:3;pointer-events:none;position:absolute;overflow:hidden}html.js.motion .film:not(.film-off) .film-cutout.is-on{display:block}.film-cutout img{object-fit:cover;object-position:var(--op,50% 50%);width:100%;height:100%;transform-origin:var(--fx,50%) var(--fy,50%);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:var(--op,50% 50%);mask-position:var(--op,50% 50%);display:block;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-mode:luminance}html.js.motion .film:not(.film-off) .film-clock{z-index:2;color:var(--fg);white-space:nowrap;pointer-events:none;height:.8em;font-size:120px;line-height:.8;display:flex;position:absolute;top:0;left:0}html.js.motion.fine .film:not(.film-off) .film-clock{will-change:transform}html.js.motion .film:not(.film-off) .film-clock.is-photo{color:var(--ink)}html.js.motion .film:not(.film-off) .film-clock.is-photo.is-light{color:#fff;filter:drop-shadow(0 2px 30px #00000047)}html.js.motion .film:not(.film-off) .film-clock.is-off{opacity:.08}.fc-d{height:.8em;display:inline-block;position:relative;overflow:hidden}.fc-roll{flex-direction:column;display:flex}.fc-roll span{height:.8em;line-height:.8;display:block}.fc-colon{height:.8em;margin:0 -.02em;line-height:.76;display:inline-block}html.js.motion .film:not(.film-off) .film-sub{z-index:4;font:500 20px/1.42 var(--f-sans);color:var(--fg);pointer-events:none;text-wrap:pretty;display:block;position:absolute;top:0;left:0}html.js.motion .film:not(.film-off) .film-sub.on-photo{color:#fff;text-shadow:0 1px 2px #00000059}html.js.motion .film:not(.film-off) .film-sub.on-photo:before{content:"";z-index:-1;opacity:var(--sa,1);background:radial-gradient(closest-side,#0000008c,#0000);position:absolute;inset:-70px -90px -50px}.film-sub .sl{display:block}html.js.motion .film:not(.film-off) .film-count{right:var(--gutter);top:calc(var(--head) + 14px);z-index:4;color:var(--fg-2);display:block;position:absolute}html.js.motion .film-report:not(.film-off) .film-count{top:calc(var(--head) + 18px)}html.js.motion .film-home:not(.film-off) .film-count{top:calc(var(--head) + 4px)}html.js.motion .film:not(.film-off) .film-count.is-left{right:auto;left:var(--gutter)}html.js.motion .film:not(.film-off) .film-count.on-photo{color:#fff;text-shadow:0 1px 3px #0009}html.js.motion .film:not(.film-off) .film-stage.ruler-on-photo:before{content:"";z-index:3;pointer-events:none;background:linear-gradient(#0d0d0e00,#0d0d0e9e);height:170px;position:absolute;bottom:0;left:0;right:0}html.js.motion .film:not(.film-off) .film-stage.ruler-on-photo .eruler{color:#f3f1ec;--fg-2:#d8d4cb}html.js.motion .film:not(.film-off) .film-rulers{z-index:4;height:46px;display:block;position:absolute;bottom:34px;left:40px;right:40px}html.js.motion .film:not(.film-off) .film-bridge{z-index:5;text-align:center;opacity:0;pointer-events:none;color:var(--night-ink);justify-content:center;gap:10px;display:grid;position:absolute;inset:auto 0 22%}.film-bridge b{font:900 var(--fs-h2)/.9 var(--f-sans);text-transform:uppercase;font-stretch:62%}.film-bridge span{font:500 13px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--night-ink-2)}.eruler{color:var(--fg);position:absolute;inset:0}.er-line{opacity:.7;background:currentColor;height:1.5px;position:absolute;top:20px;left:0;right:0}.er-past{height:2.5px;width:var(--past,0%);background:var(--rec);transform-origin:0;position:absolute;top:19.5px;left:0}[data-light=night] .er-past{background:var(--rec-night)}.er-q{opacity:.3;background:currentColor;width:1px;height:11px;position:absolute;top:15px}.er-q.is-h{opacity:.55;height:17px;top:12px}.er-h{font:400 11px/1 var(--f-mono);color:var(--fg-2);position:absolute;top:31px;transform:translate(-50%)}.er-mark{background:currentColor;width:2px;height:22px;margin-left:-1px;position:absolute;top:9px}.er-sun{font:500 11px/1 var(--f-mono);color:var(--amber-ink);white-space:nowrap;position:absolute;top:-6px;transform:translate(-50%)}[data-light=night] .er-sun{color:var(--amber)}.er-from,.er-to{font:500 11px/1 var(--f-mono);color:var(--fg);position:absolute;top:31px}.er-from{left:0}.er-to{right:0}.er-head{top:4px;left:var(--ph,0%);background:var(--rec);width:2px;height:32px;margin-left:-1px;position:absolute}[data-light=night] .er-head{background:var(--rec-night)}html.js.motion .film-report:not(.film-off) .film-frame{--gx:0px;--gy:0px}@media (width<=767px){html.js.motion .film:not(.film-off) .film-rulers{left:var(--gutter);right:var(--gutter);bottom:calc(14px + env(safe-area-inset-bottom));height:40px}html.js.motion body[data-actionbar=auto] .film:not(.film-off) .film-rulers{bottom:calc(78px + env(safe-area-inset-bottom))}html.js.motion .film:not(.film-off) .film-sub{font-size:15.5px}html.js.motion .film:not(.film-off) .film-stage:after{content:"";bottom:0;left:0;right:0;top:var(--sheet-top,66%);background:var(--bg);z-index:1;box-shadow:0 -1px 0 var(--rule);border-radius:12px 12px 0 0;position:absolute}html.js.motion .film:not(.film-off) .film-stage .film-hint{right:var(--gutter);top:calc(var(--sheet-top,66%) + 9px);z-index:4;color:var(--fg-2);transition:opacity var(--dur-base);font-size:11px;display:block;position:absolute}html.js.motion .film:not(.film-off) .film-stage .film-hint.is-off{opacity:0}html.js.motion .film:not(.film-off) .film-stage{touch-action:pan-y}html.js.motion .film:not(.film-off) .film-count{top:calc(var(--head) + 10px)}.er-h.is-tight{display:none}}
