/* Keep the rotating film endpoints beyond both viewport edges. */
.bp-hero{grid-template-columns:minmax(0,1fr);gap:24px}
.bp-hero-copy{max-width:760px}
.bp-hero-film{min-width:0;position:relative;padding:30px 0 10px;isolation:isolate}
.bp-film-note{font:700 21px/1.8 'DDZ Native Handwriting',cursive;color:var(--green);transform:rotate(-4deg);margin:0 0 28px 15px}
.bp-film-reel{position:relative;left:50%;width:calc(100vw + 112px);margin-block:clamp(24px,3.7vw,90px);transform:translateX(-50%) rotate(-4deg);filter:drop-shadow(5px 16px 12px #302b2529)}
.bp-film-window{overflow-x:auto;overflow-y:hidden;scroll-behavior:auto;scrollbar-width:none;overscroll-behavior-x:contain;background:#23251f;border-radius:2px;cursor:grab;touch-action:pan-x pan-y;outline-offset:7px;-webkit-overflow-scrolling:touch}
.bp-film-window::-webkit-scrollbar{display:none}.bp-film-window.is-dragging{cursor:grabbing}
.bp-film-track{display:flex;width:max-content;user-select:none;-webkit-user-select:none}
.bp-film-group{position:relative;display:flex;align-items:center;gap:14px;padding:37px 14px 43px 0;flex-shrink:0}
.bp-film-group:before,.bp-film-group:after{content:'';position:absolute;left:0;right:0;height:11px;background:repeating-linear-gradient(90deg,transparent 0 6px,#f4eddc 6px 19px,transparent 19px 28px);pointer-events:none}
.bp-film-group:before{top:10px}.bp-film-group:after{bottom:10px}
.bp-film-frame{position:relative;flex-shrink:0;display:block;height:265px;aspect-ratio:var(--frame-ratio);border-inline:1px solid #d9cfad22;background:#23251f;-webkit-user-drag:none}
.bp-film-frame>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.bp-film-frame>span{position:absolute;bottom:-22px;left:5px;right:5px;display:flex;justify-content:space-between;align-items:center;font:9px/1.5 'Courier New',monospace;letter-spacing:2px;color:var(--yellow);pointer-events:none}
.bp-film-frame>span i{font-style:normal;margin-left:auto;margin-right:12px}
.bp-film-frame:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.bp-film-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:34px 9px 0 15px;color:var(--green);font-size:10px;line-height:1.8}
.bp-film-pause{display:block;border:1px solid #354e4040;border-radius:20px;background:transparent;padding:8px 14px;color:var(--green);font-size:10px;min-height:38px;flex-shrink:0}
.bp-film-pause:hover{background:#354e400d}.bp-film-caption{display:block;font-size:8px;letter-spacing:2px;color:#89806d;margin:12px 0 0 15px}
@media(min-width:1001px){.bp-hero-film{padding-top:10px}}
@media(max-width:1000px){.bp-film-frame{height:230px}.bp-film-note{font-size:18px}.bp-film-tools{gap:5px;margin-inline:5px}.bp-film-pause{padding:7px 10px}}
@media(max-width:760px){.bp-hero-film{padding-top:25px;margin:12px 0 10px;max-width:100%}.bp-film-note{font-size:20px;margin:0 0 26px 4px}.bp-film-reel{transform:translateX(-50%) rotate(-3deg);margin-block:26px}.bp-film-frame{height:230px}.bp-film-tools{margin-top:28px;margin-inline:0}.bp-film-caption{margin-left:0}.bp-film-pause{padding:7px 14px}}
@media(max-width:360px){.bp-film-frame{height:205px}.bp-film-note{font-size:18px}.bp-film-tools{font-size:9px}.bp-film-group{gap:11px;padding-right:11px}}
@media(prefers-reduced-motion:reduce){.bp-film-pause{display:none}.bp-film-window{scroll-behavior:auto}}