.film-story{position:relative;background:#eee2ca;overflow:clip}
.film-section{width:100%;height:auto;min-height:0;position:relative;display:flex;justify-content:center;align-items:center;scroll-margin-top:0;background:#eee2ca}
.film-section video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;mask-image:linear-gradient(transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 4%,#000 96%,transparent)}
.next-film{position:absolute;bottom:24px;right:20px;z-index:2;width:48px;height:48px;display:grid;place-items:center;border:1px solid #d9c599aa;border-radius:50%;background:#582b29bb;color:#f5e9cd;backdrop-filter:blur(8px);box-shadow:0 3px 15px #35231c22}
.next-film svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.next-film:hover{background:#6c302d}
footer .company-logo{width:min(530px,90%);height:auto;display:block;margin:0 auto 28px}
.social-links{display:flex;flex-wrap:wrap;gap:25px;justify-content:center;align-items:center;color:#b8c6a4}
.social-links a{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px;font:14px 'DM Sans',sans-serif;letter-spacing:1px}.social-links a:hover{color:#e0e8d5}.social-links svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.social-links .dot{fill:currentColor;stroke:none}
@media(max-width:600px){.next-film{right:18px;bottom:22px}.film-section{min-height:0}footer .company-logo{width:min(430px,100%)}.social-links{gap:16px}}

/* Keep the complete frame, and place navigation outside the filmed captions. */
.film-section{display:block;padding:0 0 36px;background:var(--paper)}
.film-section video{height:auto;aspect-ratio:9/16;object-fit:contain;--edge-fade:clamp(16px,4vw,32px);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--edge-fade),#000 calc(100% - var(--edge-fade)),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--edge-fade),#000 calc(100% - var(--edge-fade)),transparent 100%)}
.next-film{width:44px;height:36px;bottom:0;right:5px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;color:#6c302d}
.next-film:before{content:'';position:absolute;width:24px;height:24px;border-radius:50%;background:#6c302d10;border:1px solid #9b775a55;z-index:-1}
.next-film svg{width:13px;height:13px}.next-film:hover{background:transparent;color:#a4694c}
.film-story{overflow:visible}
#film-7{padding-bottom:60px}
#film-7:after{content:none}
#film-7 .next-film{bottom:12px}
.reveal{background:var(--paper);padding-top:45px}
footer{color:#eee2ca;padding-bottom:42px}
footer .company-logo{width:min(330px,70%);margin:0 auto 8px}
footer .powered-by{font:20px 'EB Garamond',Georgia,serif;margin:0 0 15px}
footer .social-links{color:#eee2ca;gap:5px}
footer .social-links a{width:44px;height:44px;justify-content:center;padding:10px}
footer .social-links svg{width:23px;height:23px}
footer .copyright{font:16px/1.5 'EB Garamond',Georgia,serif;color:#eee2ca;margin:18px auto 0;max-width:90%}
.soundtrack{text-align:center;padding:0 20px 25px;background:var(--paper)}
.soundtrack iframe{display:block;margin:auto;width:320px;max-width:100%;height:200px;border:0}
.soundtrack .text-link{font-size:8px;letter-spacing:1px}
#music-status{font-size:16px;max-width:340px;margin:10px auto}
#music-status:empty{display:none}
.music-toggle{position:fixed;left:10px;bottom:10px;width:36px;height:36px;z-index:25;border:1px solid #b49462;border-radius:50%;background:#eee2caec;color:#6c302d;font-size:20px;cursor:pointer;opacity:.8}
.music-toggle.playing{background:#6c302d;color:#eee2ca}
body.waiting .soundtrack{visibility:hidden}
@media(max-width:600px){footer .company-logo{width:230px;max-width:70%}footer .powered-by{font-size:18px}footer .copyright{font-size:14px}.next-film{right:3px;bottom:0}.reveal{padding-top:35px}}