:root{color-scheme:dark;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-synthesis:none;background:#191d1b;color:#f0ede5}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;overflow:hidden}body{min-height:100svh;display:grid;place-items:center}
.film{position:relative;isolation:isolate;container-type:inline-size;width:min(100%,160svh);aspect-ratio:16/10;overflow:hidden;background:#191d1b}
.embedded .film{width:100%;height:100svh;aspect-ratio:auto}
.editorial{position:absolute;inset:0;background:#ebe8df;overflow:hidden}
.editorial-photo{position:absolute;inset:0 0 0 44%;overflow:hidden}
.editorial-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:48% 45%;transform-origin:50% 55%;will-change:transform}
.masthead{position:absolute;top:7%;left:5.3%;font-size:3.9cqw;line-height:1;letter-spacing:-.065em;font-weight:500;color:#242822}
.masthead>span{display:block;margin-top:1.25cqw;font-size:clamp(9px,1.07cqw,14px);line-height:1.5;letter-spacing:-.005em;font-weight:400;color:#696d64}
.title{position:absolute;top:47%;left:5%;margin:0;font-size:8.5cqw;line-height:.96;letter-spacing:-.074em;font-weight:400;color:#242822}
.title-line{display:block;overflow:hidden;padding:0 .1em .09em 0;margin-bottom:-.04em}
.title-line>span{display:block;will-change:transform,opacity}
.credit{position:absolute;left:5.3%;bottom:9.4%;margin:0;color:#75796f;font-size:clamp(9px,1.01cqw,13px);line-height:1.6;letter-spacing:-.01em}
.credit>span{color:#3f463b}
.opening{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden;will-change:clip-path,opacity}
.opening>img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 43%;will-change:transform}
.opening-shade{position:absolute;inset:0;background:#151c18;opacity:.27}
.opening-wordmark{position:absolute;inset:0;display:grid;place-items:center;font-size:10cqw;font-weight:400;letter-spacing:-.075em;line-height:1;color:#f1eee5;will-change:transform,opacity}
.transport{position:absolute;z-index:5;left:48%;right:4.4%;bottom:4.3%;display:flex;align-items:center;gap:1.1cqw;color:#f6f2e9}
.transport[hidden]{display:none}
.play{display:grid;place-items:center;flex-shrink:0;width:clamp(30px,4cqw,46px);height:clamp(30px,4cqw,46px);padding:0;color:inherit;background:#1420194a;border:1px solid #ffffff59;border-radius:50%;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background 150ms ease,transform 150ms cubic-bezier(.23,1,.32,1)}
.play svg{width:clamp(15px,1.9cqw,21px);height:clamp(15px,1.9cqw,21px)}
.play-icon{margin-left:1px}.pause-icon{display:none}
.film[data-playing=true] .play-icon{display:none}.film[data-playing=true] .pause-icon{display:block}
.time{font-size:clamp(9px,1.05cqw,13px);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em;text-shadow:0 1px 5px #15201955}
.time>span{color:#f6f2e991}
.timeline{display:flex;align-items:center;flex:1;min-width:20px;height:30px;cursor:pointer}
.timeline input{--progress:100%;appearance:none;-webkit-appearance:none;display:block;width:100%;height:24px;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;outline-offset:4px}
.timeline input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#f5f0e3 var(--progress),#f5f0e34f var(--progress));border-radius:1px}
.timeline input::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:8px;margin-top:-3px;border-radius:50%;border:0;background:#f5f0e3;box-shadow:0 0 0 3px #0e161b15}
.timeline input::-moz-range-track{height:2px;background:#f5f0e34f;border:0;border-radius:1px}
.timeline input::-moz-range-progress{height:2px;background:#f5f0e3}
.timeline input::-moz-range-thumb{width:8px;height:8px;border-radius:50%;border:0;background:#f5f0e3}
.play:focus-visible,.timeline input:focus-visible{outline:2px solid #fff;outline-offset:4px}
.play:active{transform:scale(.96)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(hover:hover) and (pointer:fine){.play:hover{background:#14201980}}
@media(max-width:480px){.transport{left:47%;right:4%;gap:7px}.time{font-size:9px}.time>span{display:none}.credit{bottom:10%}}
@media(prefers-reduced-motion:reduce){.play{transition:none}.play:active{transform:none}.opening,.opening>img,.opening-wordmark,.editorial-photo img,.title-line>span{will-change:auto}}