:root { color-scheme: dark; background: #000; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: #000; overflow: hidden; }
body.interior-body { background: #171717; overflow-x: hidden; overflow-y: auto; }
.entry, .scene { position: relative; width: 100%; height: 100svh; min-height: 400px; background: #000; overflow: hidden; }
.finger {
  position: fixed; z-index: 2;
  left: var(--cursor-x, 50vw); top: calc(var(--cursor-y, 50vh) - var(--top-pad, 0px));
  width: clamp(154px, 18.75vw, 255px); height: auto;
  transform: translateX(-50%); opacity: 0; pointer-events: none;
  user-select: none; transition: opacity .16s ease, transform .24s ease;
}
.finger.ready { opacity: 1; }
.scene:not(.has-video) .finger { opacity: 0; }
.scene.pointer-away .finger { opacity: 0; }
.switch {
  position: absolute; z-index: 1; top: 43%; left: 50%;
  width: min(288px, calc(100vw - 48px)); aspect-ratio: 1;
  transform: translate(-50%, -50%); padding: 0;
  border: 0; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.switch:focus-visible { outline: 2px solid #ffb869; outline-offset: 14px; }
.switch-video { position: absolute; inset: 0; width: 100%; height: 100%; display: none; object-fit: contain; }
.has-video .switch-video { display: block; }
.switch:hover { filter: brightness(1.13); }
.scene.pressed .finger { transform: translate(-50%, -26px); }
.scene.pressed .switch { transform: translate(-50%, -50%) scale(.94); }
.flash { position: fixed; z-index: 10; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.entry.pressed .flash { animation: flash .58s ease-out .18s both; }
@keyframes flash { 0%, 100% { opacity: 0; } 17% { opacity: .75; } 45% { opacity: .04; } }
[hidden] { display: none !important; }
.experience {
  position: fixed; z-index: 4; inset: 0; background: #000;
  display: grid; place-items: center; overflow: auto;
}
.intro-video {
  display: block; width: min(100vw, 1920px); max-height: 100svh;
  height: auto; object-fit: contain;
}
.live-page {
  position: relative; width: min(100vw, 2048px); min-height: 100svh;
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  margin: auto; color: #297f8b; background: #171717;
  font-family: "HK Nova", "Helvetica Neue", "Avenir Next", "Segoe UI Light", Arial, sans-serif;
}
.menu-toggle {
  position: absolute; z-index: 8;
  top: clamp(20px, 2.5vw, 48px); left: clamp(20px, 2.5vw, 48px);
  width: 44px; height: 44px; padding: 9px 7px;
  display: flex; flex-direction: column; justify-content: space-around;
  border: 0; background: transparent; color: #fff; cursor: pointer;
}
.menu-toggle span { display: block; width: 100%; height: 1px; background: currentColor; }
.menu-toggle:hover, .menu-toggle:focus-visible { color: #d4f0f2; }
.menu-toggle:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
.site-menu {
  position: absolute; z-index: 7; top: clamp(20px, 2.5vw, 48px); left: clamp(20px, 2.5vw, 48px);
  min-width: min(340px, calc(100vw - 40px)); padding: 70px 28px 28px;
  background: #171717f5; border: 1px solid #297f8b66;
  box-shadow: 0 12px 36px #0008;
}
.site-menu a {
  display: block; padding: 12px 0; color: #a6c9ce; text-decoration: none;
  font-size: 13px; font-weight: 300; letter-spacing: .2em; line-height: 1.5;
}
.site-menu a:hover, .site-menu a:focus-visible, .site-menu a[aria-current="page"] { color: #fff; }
.site-menu a:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
.live-header { height: clamp(110px, 11.23vw, 230px); display: grid; place-items: center; padding: 10px 20px; }
.header-link { display: block; width: min(100%, 850px, 41.5vw); }
.header-link:focus-visible { outline: 1px solid #fff; outline-offset: 8px; }
.header-art { display: block; width: 100%; height: auto; }
.panel-frame { position: relative; width: 100%; aspect-ratio: 2048 / 684; overflow: hidden; background: #090909; }
.panel-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.offline-message {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: #0006; color: #fff; font-size: clamp(14px, 1.5vw, 23px);
  font-weight: 400; letter-spacing: .2em; text-align: center; padding: 16px;
}
.live-player { position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.panel-frame.is-live .live-player { opacity: 1; pointer-events: auto; }
#youtube-embed {
  position: absolute; top: 50%; left: 0; width: 100%; height: auto;
  min-height: max(100%, 200px); aspect-ratio: 16 / 9; border: 0;
  transform: translateY(-50%);
}
.panel-frame.is-live > img, .panel-frame.is-live > .offline-message { opacity: 0; pointer-events: none; }
.youtube-link {
  position: absolute; right: 16px; bottom: 16px; z-index: 1;
  padding: 9px 12px; background: #171717d9; color: #fff;
  font-size: 10px; letter-spacing: .12em; text-decoration: none;
}
.youtube-link:hover, .youtube-link:focus-visible { background: #297f8b; }
.live-footer {
  min-height: clamp(100px, 11.62vw, 238px); padding: 20px 4%;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .4em .8em; text-align: center;
  font-size: clamp(12px, 1.42vw, 29px); font-weight: 100;
  letter-spacing: .21em; line-height: 1.5;
}
.live-footer .separator { opacity: .7; }
.live-footer span { white-space: nowrap; }
.content-page { height: 100svh; }
.content-page .content-body {
  flex: 1; min-height: 300px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px;
  padding: 64px 24px; text-align: center; border-top: 1px solid #297f8b44;
  border-bottom: 1px solid #297f8b44;
}
.content-page h1 { margin: 0; font-size: clamp(25px, 3vw, 52px); font-weight: 100; letter-spacing: .24em; line-height: 1.3; }
.content-page .content-body p { margin: 0; color: #a6c9ce; font-size: 12px; letter-spacing: .22em; }
.content-page .return-link { color: #fff; text-decoration: none; font-size: 12px; letter-spacing: .2em; border-bottom: 1px solid #fff8; padding-bottom: 6px; }
.content-page .return-link:hover, .content-page .return-link:focus-visible { color: #a6c9ce; }
.contact-page .content-body { gap: 0; }
.contact-page h1 { margin-bottom: 48px; }
.contact-details { width: min(100%, 630px); text-align: left; }
.contact-details h2 { margin: 0 0 38px; color: #d0d7d7; font-size: clamp(19px, 1.45vw, 27px); font-weight: 200; letter-spacing: .13em; }
.contact-details dl { margin: 0; }
.contact-details dl > div { display: grid; grid-template-columns: 140px 1fr; gap: 15px; margin-bottom: 27px; }
.contact-details dt { color: #297f8b; font-size: 12px; letter-spacing: .16em; }
.contact-details dd { margin: 0; color: #d0d7d7; font-size: clamp(15px, 1vw, 18px); font-weight: 300; letter-spacing: .015em; line-height: 1.7; overflow-wrap: anywhere; }
.contact-details a { color: inherit; text-decoration: none; border-bottom: 1px solid #297f8b77; }
.contact-details a:hover, .contact-details a:focus-visible { color: #7ea9af; }
.contact-page .return-link { margin-top: 38px; }
.statement-page { justify-content: flex-start; }
.statement {
  width: 100%; flex: 1; padding: clamp(56px, 6vw, 110px) 24px;
  border-top: 1px solid #297f8b44; border-bottom: 1px solid #297f8b44;
}
.statement h1 {
  margin: 0 auto clamp(44px, 5vw, 76px); color: #297f8b; text-align: center;
  font-size: clamp(28px, 3vw, 52px); font-weight: 100; letter-spacing: .17em;
}
.statement-copy { width: min(100%, 760px); margin: 0 auto; color: #d0d7d7; }
.statement-copy p { margin: 0 0 1.15em; font-size: clamp(16px, .93vw, 18px); font-weight: 300; line-height: 1.62; }
.collaborate-page .statement-copy h2 {
  margin: 2.6em 0 1.2em; color: #297f8b;
  font-size: clamp(17px, 1.1vw, 21px); font-weight: 200; letter-spacing: .1em;
}
.collaborate-page .statement-copy ul { margin: 0; padding-left: 1.3em; }
.collaborate-page .statement-copy li {
  margin-bottom: .65em; padding-left: .25em;
  font-size: clamp(16px, .93vw, 18px); font-weight: 300; line-height: 1.62;
}
.statement-copy blockquote {
  margin: 1.8em auto; color: #7ea9af; text-align: center;
  font-size: clamp(18px, 1.2vw, 23px); font-weight: 200; line-height: 1.45; letter-spacing: 0;
}
.statement-copy .closing-quote { margin-bottom: 0; }
.statement .return-link {
  display: table; margin: 52px auto 0; padding-bottom: 6px;
  color: #fff; border-bottom: 1px solid #fff8; text-decoration: none;
  font-size: 12px; letter-spacing: .2em;
}
.statement .return-link:hover, .statement .return-link:focus-visible { color: #a6c9ce; }
.bio { display: flex; flex-direction: column; justify-content: center; }
.bio .statement-copy { width: min(100%, 760px); }
.bio-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 36px; margin-top: 30px; }
.bio-links .return-link { margin: 0; }
@font-face { font-family: "HK Nova Films"; src: url("./assets/HKNova-Thin.ttf") format("truetype"); font-weight: 100; font-display: swap; }
@font-face { font-family: "HK Nova Films"; src: url("./assets/HKNova-ExtraLight.ttf") format("truetype"); font-weight: 200; font-display: swap; }
@font-face { font-family: "HK Nova Films"; src: url("./assets/HKNova-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
.films-page { font-family: "HK Nova Films", "Helvetica Neue", Arial, sans-serif; }
.film-flow { width: min(100%, 760px); margin: 0 auto; color: #d0d7d7; }
.film-flow p, .verification-dialog p { font-size: clamp(16px, .93vw, 18px); font-weight: 300; line-height: 1.62; margin: 0 0 1.15em; }
.film-flow .film-intro { color: #a6c9ce; font-size: clamp(18px, 1.2vw, 23px); }
.film-opening { display: flex; flex-direction: column; gap: 28px; }
.film-flow .film-opening p { margin: 0; }
.film-opening .film-instructions { max-width: none; }
@media (min-width: 900px) {
  .film-opening .film-instructions { white-space: nowrap; font-size: 16px; }
}
.film-flow .film-availability { color: #9aa5a6; font-size: 11px; letter-spacing: .14em; margin: 22px 0 38px; }
.film-step { padding: 36px 0; border-top: 1px solid #297f8b44; }
.film-step h2, .verification-dialog h2 { margin: 0 0 24px; color: #7ea9af; font-size: clamp(18px, 1.3vw, 23px); font-weight: 200; letter-spacing: .08em; line-height: 1.4; }
.film-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.film-flow label, .selfie-picker label { display: block; font-size: 15px; font-weight: 300; line-height: 1.6; margin: 20px 0; }
.film-flow input:not([type="checkbox"]), .film-flow select, .selfie-picker input {
  display: block; width: 100%; min-width: 0; margin-top: 8px; padding: 12px;
  font: inherit; color: #d0d7d7; background: #101313; border: 1px solid #297f8b77; border-radius: 0;
}
.film-flow input:focus-visible, .film-flow select:focus-visible, .selfie-picker input:focus-visible { outline: 2px solid #a6c9ce; outline-offset: 3px; }
.film-button {
  display: inline-block; max-width: 100%; padding: 14px 18px; margin: 12px 0;
  border: 1px solid #7ea9af; background: transparent; color: #d0d7d7;
  font: inherit; font-size: 12px; letter-spacing: .12em; line-height: 1.5; cursor: pointer;
}
.film-button:hover:not(:disabled) { background: #297f8b33; color: #fff; }
.film-button:focus-visible, .film-text-button:focus-visible, .dialog-close:focus-visible { outline: 2px solid #a6c9ce; outline-offset: 4px; }
.film-button:disabled { opacity: .55; cursor: default; }
.film-flow .film-note, .verification-dialog .film-note { font-size: 13px; color: #a1aaab; margin: 12px 0 0; line-height: 1.6; }
.film-flow .film-check { display: flex; align-items: flex-start; gap: 14px; margin: 24px 0; }
.film-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 3px 0 0; accent-color: #297f8b; }
.film-check input:focus-visible { outline: 2px solid #a6c9ce; outline-offset: 3px; }
.required-note { display: block; color: #a1aaab; font-size: 12px; margin-top: 4px; }
.film-flow .choice-notice { font-size: 13px; letter-spacing: .04em; color: #d0d7d7; }
.choice-notice strong { font-weight: 600; }
#archive-video { display: block; width: 100%; margin: 24px 0; background: #000; aspect-ratio: 16 / 9; }
.film-price { font-size: 32px; font-weight: 200; color: #7ea9af; margin: 28px 0 10px; }
.film-price span { margin-left: 14px; font-size: 11px; letter-spacing: .14em; }
.verification-dialog {
  width: min(680px, calc(100% - 32px)); max-height: calc(100svh - 48px); padding: clamp(28px, 5vw, 52px);
  border: 1px solid #297f8b88; background: #171717; color: #d0d7d7; overflow-y: auto;
  font-family: "HK Nova Films", "Helvetica Neue", "Avenir Next", "Segoe UI Light", Arial, sans-serif;
}
.verification-dialog::backdrop { background: #000c; }
.verification-dialog h2 { padding-right: 20px; }
.verification-dialog strong { font-weight: 400; }
.dialog-close { position: absolute; right: 14px; top: 10px; padding: 5px 10px; border: 0; background: transparent; color: #d0d7d7; font: inherit; font-size: 28px; cursor: pointer; }
.selfie-picker { margin-top: 30px; padding-top: 16px; border-top: 1px solid #297f8b44; }
#selfie-preview { display: block; max-width: 220px; max-height: 240px; margin: 20px 0; object-fit: contain; }
.film-text-button { margin: 12px; padding: 8px 0; border: 0; border-bottom: 1px solid #7ea9af; background: transparent; color: #d0d7d7; font: inherit; font-size: 11px; letter-spacing: .1em; cursor: pointer; }
body:has(.verification-dialog[open]) { overflow: hidden; }
@media (max-width: 600px) {
  .switch { top: 39%; }
  .finger { width: min(46.5vw, 225px); }
  .live-page { min-height: 100svh; justify-content: center; }
  .live-header { height: 125px; padding: 12px; }
  .header-link { width: min(100%, 560px); }
  .live-footer { min-height: 135px; padding: 18px 12px; font-size: 10px; letter-spacing: .12em; gap: .15em .5em; }
  .content-page h1 { font-size: clamp(23px, 6vw, 36px); letter-spacing: .13em; }
  .contact-details dl > div { display: block; margin-bottom: 22px; }
  .contact-details dt { margin-bottom: 5px; }
  .contact-page h1 { margin-bottom: 36px; }
  .statement { padding: 48px 23px 64px; }
  .statement h1 { font-size: 26px; letter-spacing: .12em; margin-bottom: 42px; }
  .film-fields { grid-template-columns: 1fr; gap: 0; }
  .film-step { padding: 30px 0; }
  .films-page .statement h1 { font-size: clamp(20px, 5.5vw, 26px); letter-spacing: .08em; }
}
@media (hover: hover) and (pointer: fine) {
  .scene, .switch { cursor: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}