/* the seam: a loose thread at the edge of the page. pull it. */
.sm-thread { position: fixed; left: 0; top: 50%; z-index: 2147483090; width: 64px; height: 120px; margin-top: -30px; padding: 0; border: 0; background: none; cursor: grab; opacity: 0; pointer-events: none; transition: opacity 2s ease 4s; touch-action: none; -webkit-tap-highlight-color: transparent; }
.sm-thread.on { opacity: 1; pointer-events: auto; }
.sm-thread canvas { width: 64px; height: 120px; display: block; pointer-events: none; }
html.gw-open .sm-thread { opacity: 0 !important; pointer-events: none !important; transition: opacity .3s; }
.sm-film { position: fixed; inset: 0; z-index: 2147483160; background: #000; visibility: hidden; pointer-events: none; }
.sm-film.on { visibility: visible; }
.sm-film.full { pointer-events: auto; }
.sm-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 2.4s cubic-bezier(.2,.7,.2,1), filter 2.4s ease; filter: saturate(.7) brightness(.8); }
.sm-film.full video { transform: none; filter: none; }
.sm-fx { position: fixed; inset: 0; z-index: 2147483170; width: 100%; height: 100%; pointer-events: none; display: none; }
.sm-fx.on { display: block; }
.sm-ui { position: fixed; inset: 0; z-index: 2147483180; pointer-events: none; color: #f3f0e6; opacity: 0; transition: opacity 1.4s ease .6s; font-family: 'Inter', system-ui, sans-serif; font-weight: 300; }
.sm-ui.on { opacity: 1; }
.sm-ui::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 180px; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); }
.sm-ui::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6)); }
.sm-ui h2 { position: absolute; left: 28px; top: 24px; margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(30px, 4vw, 54px); line-height: 1; letter-spacing: -.01em; }
.sm-ui h2 span { display: inline-block; opacity: 0; transform: translateY(18px) rotate(4deg); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); }
.sm-ui.on h2 span { opacity: 1; transform: none; }
.sm-ui p { position: absolute; left: 30px; top: calc(24px + clamp(30px, 4vw, 54px) + 14px); margin: 0; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; opacity: .8; }
.sm-ui .sm-line { position: absolute; left: 0; right: 0; bottom: 84px; text-align: center; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(22px, 3vw, 38px); opacity: 0; transform: translateY(10px); transition: opacity 1.4s ease, transform 1.4s ease; text-shadow: 0 2px 24px rgba(0,0,0,.8); }
.sm-ui .sm-line.on { opacity: 1; transform: none; }
.sm-ui button { position: absolute; z-index: 2; pointer-events: auto; appearance: none; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: inherit; font: inherit; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; padding: 12px 18px; border-radius: 999px; cursor: pointer; }
.sm-ui .sm-shut { right: 24px; top: 24px; }
.sm-ui .sm-snd { right: 24px; bottom: 24px; }
.sm-ui .sm-bar { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 30px; height: 1px; background: rgba(255,255,255,.25); margin-right: 130px; }
.sm-ui .sm-bar i { display: block; height: 100%; width: 0; background: #ffe2a0; box-shadow: 0 0 10px rgba(255,220,150,.8); }
@media (max-width: 700px) { .sm-ui h2 { left: 18px; top: 18px; } .sm-ui p { left: 20px; } .sm-ui .sm-shut { right: 14px; top: 16px; } .sm-ui .sm-snd { right: 14px; bottom: 16px; } .sm-ui .sm-bar { left: 18px; bottom: 34px; } }

/* quiet: the film sits in a frame, nothing speaks */
.sm-film { background: #0b0a09; }
.sm-film video { transition: transform 3.6s cubic-bezier(.3,.6,.2,1), filter 3.6s ease, inset 2.8s cubic-bezier(.3,.6,.2,1); filter: saturate(.6) brightness(.72); transform: scale(1.04); }
.sm-film.full video { inset: clamp(18px, 5.5vh, 64px) clamp(18px, 5.5vw, 96px); width: auto; height: auto; filter: saturate(.92); transform: none; }
.sm-film.full video { width: calc(100% - 2 * clamp(18px, 5.5vw, 96px)); height: calc(100% - 2 * clamp(18px, 5.5vh, 64px)); }
.sm-ui { transition: opacity 2.6s ease 1.6s; }
.sm-ui::before, .sm-ui::after { display: none; }
.sm-ui button.sm-shut { right: clamp(18px, 5.5vw, 96px); top: auto; bottom: calc(clamp(18px, 5.5vh, 64px) / 2 - 8px); border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 4px 0; font-size: 9px; letter-spacing: .42em; opacity: .55; transition: opacity .6s; }
.sm-ui button.sm-shut:hover { opacity: 1; }
.sm-ui .sm-snd { display: none; }
.sm-ui .sm-bar { left: clamp(18px, 5.5vw, 96px); right: clamp(18px, 5.5vw, 96px); margin-right: 0; bottom: clamp(18px, 5.5vh, 64px); height: 1px; background: rgba(240,236,226,.12); }
.sm-ui .sm-bar i { background: rgba(240,236,226,.7); box-shadow: none; }
.sm-ui .sm-mark { position: absolute; left: clamp(18px, 5.5vw, 96px); bottom: calc(clamp(18px, 5.5vh, 64px) / 2 - 5px); font-style: normal; font-size: 9px; letter-spacing: .42em; text-transform: uppercase; opacity: .45; }
.sm-ui .sm-line { display: none; }