/* A quiet frame for the films. Shared by the homepage and individual films. */
:root{--film-title-size:1rem;--film-corner:8px}
.film-title,.showcase-title{font-weight:500;letter-spacing:.005em;line-height:1.55}
.film-meta,.film-motion-enabled .film-wide .film-meta{margin-top:16px;gap:0}
.film-duration{display:none}
.film-visual,.film-motion-enabled .film-visual,.film-motion-enabled .film-button:hover .film-visual,
.film-grid>.film-card:not(.film-wide) .film-visual,.film-grid>.film-card:not(.film-wide) .film-button:hover .film-visual,
.showcase-media,.video-container,.watch-player{border-radius:var(--film-corner);box-shadow:none}
.showcase-slide{width:88%;max-width:1640px;display:flex;flex-direction:column}
.showcase-media{order:0;aspect-ratio:2.39/1}
.showcase-title{order:1;margin:15px 0 0;padding:0;height:1.55em;color:var(--ink)}
.showcase-viewport{--showcase-gap:22px;transform-origin:center center;overscroll-behavior-x:contain}
/* Keep the actual player visible to Safari while its poster covers loading. */
.showcase-media .hover-preview{opacity:1;transition:none}
.showcase-media>.showcase-poster{z-index:2;opacity:1;transition:opacity .35s ease}
.showcase-media.is-previewing>.showcase-poster{opacity:0}
#opening .hero-stage{gap:8px}
/* Three independent lines are both the position indicator and the controls. */
.showcase-controls{width:max-content;max-width:100%;height:44px;gap:12px;border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.showcase-controls:before,.showcase-controls:after{content:none}
.showcase-controls .showcase-stop{display:grid;place-items:center;width:60px;height:44px;flex:0 0 60px;border-radius:0;background:transparent}
.showcase-controls .showcase-stop:before{content:"";display:block;width:30px;height:2px;background:currentColor;opacity:.22;transition:width .3s var(--ease),opacity .3s var(--ease)}
.showcase-controls .showcase-stop[aria-pressed=true]:before{width:48px;opacity:.7}

/* Open text filters with one underline, without a surrounding pill. */
#work .section-heading-row .filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;width:max-content;max-width:100%;gap:clamp(18px,2.4vw,32px);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#work .filters .filter{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:6px 0 12px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--secondary);font-size:clamp(14px,1.2vw,16px);line-height:1.4;text-transform:none;transition:color .2s ease}
#work .filters .filter:after{content:"";position:absolute;inset:auto 0 2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform .25s var(--ease);pointer-events:none}
#work .filters .filter[aria-pressed=true]{color:var(--ink);background:transparent;box-shadow:none}
#work .filters .filter[aria-pressed=true]:after{transform:scaleX(1)}

/* Keep the trilogy together, with the film edges on their existing grid. */
:root{--watchtower-paper:#000000}
.film-collection[data-collection=watchtower]{--watchtower-inset:clamp(18px,2.5vw,40px);--ink:#eef1f5;--secondary:#aeb5bf;margin-inline:calc(-1 * var(--watchtower-inset));padding:clamp(32px,4vw,60px) var(--watchtower-inset);background:var(--watchtower-paper);color:var(--ink);border-radius:24px}
.collection-heading{border-bottom:0}
.collection-heading h3{font-weight:650;letter-spacing:-.035em}
#contact-title{transform-origin:center center;will-change:transform,opacity}
.film-title.title-marquee-ready{mask-image:linear-gradient(to right,#000 0%,#000 94%,transparent);-webkit-mask-image:linear-gradient(to right,#000 0%,#000 94%,transparent)}
.dialog-footer{transition:opacity .22s}
.dialog-footer h2,.film-dialog .dialog-footer h2{font-weight:500;letter-spacing:.005em}
.dialog-note[hidden]{display:none}
.viewer-hint{font-size:.75rem;color:#8b919a;margin-bottom:auto}
.watch-main h1{font-size:clamp(24px,3.2vw,48px);font-weight:500;letter-spacing:.005em}
.film-dialog.is-morphing .dialog-footer,.film-dialog.is-morphing .viewer-hint{opacity:0}
.film-dialog::backdrop{transition:background .45s ease}
.viewer-transition-image{position:fixed;z-index:9;pointer-events:none;display:block;object-fit:cover;background:#000;border:0;outline:0;will-change:transform;transform-origin:0 0}
.film-dialog .video-container{transform-origin:0 0}
/* One heading rests below the navigation; the next heading pushes it away. */
.section-sticky{position:fixed;inset-inline:0;z-index:9;background:var(--paper);color:var(--ink);pointer-events:none;overflow:hidden}
.section-sticky[hidden]{display:none}
.section-sticky:before{content:"";position:absolute;inset:0 0 auto;height:var(--sticky-heading-top);background:var(--paper);z-index:1}
.section-sticky-title{position:absolute;top:var(--sticky-heading-top);margin:0;padding:0;white-space:normal;overflow-wrap:normal}
.is-sticky-source{opacity:0!important}
body.modal-open .section-sticky{visibility:hidden}
@media(max-width:600px){
 :root{--film-title-size:.875rem;--film-corner:7px}
 .showcase-viewport{--showcase-gap:10px}
 .showcase-slide{width:88%}
 .showcase-title{margin-top:12px}
 .film-meta{margin-top:13px}
 #opening{padding-bottom:20px}
 #work{padding-top:32px}
 #work .section-heading-row .filters{margin:22px auto 0}
 .film-collection[data-collection=watchtower]{--watchtower-inset:10px;border-radius:20px}
}
@media(prefers-reduced-motion:reduce){
 #contact-title{transform:none!important;opacity:1!important;will-change:auto}
 .viewer-transition-image{display:none}
 .film-dialog::backdrop,.dialog-footer{transition:none}
}