/* Leave the opening to the portrait; explain interaction once, on request. */
.site-header{pointer-events:none;z-index:21;width:100%;padding:28px 34px}
.site-header .wordmark{pointer-events:auto;font-size:15px}
.hero-copy{width:auto;bottom:30px;display:flex;gap:10px;pointer-events:auto}
.icon-button{display:inline-grid;place-items:center;width:46px;height:46px;min-width:46px;padding:11px;border:1px solid #c7b69966;border-radius:50%;background:#14110ee6;color:#e6ddcd;cursor:pointer}
.icon-button:hover{background:#34281f}
.icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.gesture-hint{position:absolute;bottom:92px;left:50%;transform:translateX(-50%);z-index:6;width:max-content;max-width:85%;padding:10px 16px;background:#0b0908de;border-radius:25px;font:14px/1.5 Arial,sans-serif;text-align:center}
#camera-dialog{position:fixed;inset:0;width:min(410px,calc(100% - 36px));max-height:calc(100dvh - 40px);margin:auto;padding:40px 30px 26px;border:1px solid #bb9d645c;border-radius:4px;color:#eee9de;background:#15110eee;box-shadow:0 30px 100px #0009;overflow:auto}
#camera-dialog::backdrop{background:#0005;backdrop-filter:blur(3px)}
#camera-dialog h2{font:400 32px/1.15 Georgia,serif;margin:0 0 20px}
#camera-dialog #gesture-instruction{font:16px/1.6 Georgia,serif;margin:0 0 15px;color:#d9d0c2}
#camera-dialog #camera-note{font:12px/1.5 Arial,sans-serif;color:#ab9d8a;margin:0 0 28px}
#camera-dialog .mode-controls{flex-direction:column;gap:14px;align-items:stretch}
#camera-dialog .camera-button{background:#e3d5bc;color:#21180f;border:0;min-height:46px;border-radius:3px;font:14px Arial,sans-serif}
#camera-dialog .text-button{font:13px Arial,sans-serif;text-decoration:none;min-height:38px}
#camera-dialog .interaction-status{min-height:0;margin:0;font:13px/1.5 Arial,sans-serif}
#camera-dialog .interaction-status:not(:empty){margin-top:18px}
#camera-dialog .dialog-close{position:absolute;top:10px;right:10px;width:32px;height:32px;min-width:32px;padding:7px;border:0;background:transparent}
#stop-camera{right:24px;bottom:25px;z-index:60;padding:11px;font-size:0;min-width:46px}
.film-details>div{margin:0}.film-details{align-items:center}
.reveal-controls{bottom:3%}
html:not(.js) .hero-copy,html:not(.js) #camera-dialog{display:none}
@media(max-width:760px){.site-header{padding:23px 22px}.hero-copy{bottom:26px}.gesture-hint{font-size:13px;bottom:88px}.film-details>div{margin-top:16px}}
@media(prefers-reduced-motion:reduce){#camera-dialog::backdrop{backdrop-filter:none}}