:root { --reel-ink:#f4f7ff; --reel-muted:#a9b5ca; --reel-blue:#7aabff; --reel-orange:#f0a676; }
.video-page { background:#101726; color:var(--reel-ink); }
.video-page main { padding-top:var(--site-header-height); }
.video-page .site-header { color:#48566b; }
.reel-scroll { position:relative; min-height:780svh; background:radial-gradient(ellipse at 69% 28%,#354259 0,#192233 42%,#101726 74%); }
.reel-sticky { position:sticky; top:var(--site-header-height); height:calc(100svh - var(--site-header-height)); min-height:540px; overflow:clip; isolation:isolate; }
.reel-sticky::before { content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(circle at 78% 38%,#7499d021,transparent 30%),linear-gradient(100deg,#121c2cc9 0%,transparent 60%); }
.reel-sticky::after { content:""; position:absolute; inset:0; z-index:8; pointer-events:none; opacity:.15; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
.reel-grid { position:absolute; inset:0; z-index:-1; opacity:.15; background-image:linear-gradient(#c7d8f11c 1px,transparent 1px),linear-gradient(90deg,#c7d8f11c 1px,transparent 1px); background-size:60px 60px; mask-image:linear-gradient(90deg,transparent,#000 36%,#000); }
.reel-orbit { position:absolute; right:-7%; top:2%; width:64vw; max-width:930px; aspect-ratio:1; border:1px solid #bed1f113; border-radius:50%; pointer-events:none; transform:rotate(-25deg) scaleY(.72); }
.reel-orbit--two { right:4%; top:13%; width:46vw; border-color:#bed1f10c; transform:rotate(20deg) scaleY(.83); }
.reel-header,.reel-footer { position:absolute; left:5.5%; right:5.5%; z-index:7; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.reel-header { top:23px; color:#b8c9e6; font:650 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.11em; }
.reel-header a { border-bottom:1px solid #8aa5c075; padding-bottom:6px; transition:color .2s,border-color .2s; }
.reel-header a:hover { color:white; border-color:white; }
.reel-header span { color:#8499b8; }
.reel-layout { width:min(100%,1600px); height:100%; margin:auto; padding:45px 5.5% 65px; display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:center; gap:5%; }
.reel-copy { position:relative; z-index:5; max-width:550px; }
.reel-eyebrow,.reel-current-index { color:var(--reel-blue); font:700 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.17em; }
.reel-copy h1 { margin:13px 0 18px; color:white; font-size:clamp(53px,5.8vw,100px); line-height:1.06; letter-spacing:-.08em; font-weight:650; white-space:nowrap; }
.reel-title-dot { color:#f0a676; }
.reel-intro { max-width:34em; margin:0; color:#b9c6d8; font-size:12px; line-height:1.9; }
.reel-rule { height:1px; width:min(100%,430px); margin:40px 0 34px; background:#b9c9df35; }
.reel-rule span { display:block; width:70px; height:1px; background:var(--reel-blue); }
.reel-current { min-height:185px; }
.reel-current #reel-current-index { display:block; margin-bottom:18px; }
.reel-current #reel-current-kind { margin:0 0 11px; color:#abc3ea; font:650 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.13em; }
.reel-current h2 { min-height:2.15em; margin:0 0 12px; color:#fff; font-size:clamp(29px,3vw,48px); line-height:1.07; letter-spacing:-.065em; font-weight:620; }
.reel-current #reel-current-description { margin:0; max-width:30em; color:#aebbd0; font-size:11px; line-height:1.8; }
.reel-caveat { display:flex; align-items:center; gap:9px; margin-top:22px; color:#91a0b8; font-size:10px; }
.reel-caveat-dot { display:block; width:6px; height:6px; border:1px solid #f0a676; transform:rotate(45deg); }
.reel-object-area { --cube-size:min(36vw,calc(100svh - 365px),470px); position:relative; min-width:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-top:5px; }
.reel-halo { position:absolute; width:calc(var(--cube-size) * 1.48); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#82acff38 0,#668dee11 35%,transparent 69%); filter:blur(20px); pointer-events:none; }
.reel-perspective { display:grid; place-items:center; width:calc(var(--cube-size) * 1.34); height:calc(var(--cube-size) * 1.15); perspective:1250px; perspective-origin:50% 48%; }
.reel-cube { position:relative; width:var(--cube-size); height:var(--cube-size); transform-style:preserve-3d; transform:rotateY(0); will-change:transform; }
.reel-face { position:absolute; inset:0; overflow:hidden; color:white; border:1px solid #ebf2ff8c; background:#080d16; box-shadow:inset 0 0 0 1px #edf4ff22,0 0 45px #030e235c; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.reel-face::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,#040b17a6 0,transparent 19%,transparent 52%,#040b17d9 100%); }
.reel-face--front { transform:translateZ(calc(var(--cube-size) / 2)); }
.reel-face--right { transform:rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
.reel-face--back { transform:rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.reel-face--left { transform:rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.reel-face--top { transform:rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.reel-face--bottom { transform:rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
.reel-face-video { display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.reel-face.has-media .reel-face-video { display:block; }
.reel-player { z-index:6; display:flex; align-items:center; gap:15px; width:min(90%,470px); margin-top:-9px; padding:14px 17px; border:1px solid #c5d5f13f; background:#0c1727e0; box-shadow:0 18px 45px #030a1688; backdrop-filter:blur(18px); }
.reel-player button { flex:0 0 29px; height:29px; display:grid; place-items:center; border:1px solid #ccdafa6f; border-radius:50%; color:white; font-size:12px; }
.reel-player button:hover { background:#7aabff36; }
.reel-player button:disabled { opacity:.55; cursor:default; }
.reel-player-progress { flex:1; height:2px; overflow:hidden; background:#b9c9df3d; }
.reel-player-progress span { display:block; width:0; height:100%; background:var(--reel-blue); }
.reel-player-time { min-width:90px; color:#b8c8df; text-align:right; white-space:nowrap; font:650 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.reel-footer { bottom:27px; align-items:end; }
.reel-step-dots { display:flex; align-items:center; gap:17px; }
.reel-step-dots button { position:relative; min-width:21px; padding:8px 0; color:#8297b7; font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.reel-step-dots button::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:#b9d0f0; transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.reel-step-dots button[aria-current="step"] { color:white; }
.reel-step-dots button[aria-current="step"]::after { transform:scaleX(1); }
.reel-navigate { display:flex; align-items:center; gap:11px; color:#99adca; font:650 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; }
.reel-navigate button { width:28px; height:28px; border:1px solid #adc8ee5e; color:white; font-size:14px; }
.reel-navigate button:hover:not(:disabled) { background:#8ab8ff2d; }
.reel-navigate button:disabled { opacity:.36; cursor:default; }
.reel-navigate span { margin-left:13px; white-space:nowrap; }
.reel-scroll-progress { position:absolute; z-index:7; bottom:0; left:0; right:0; height:2px; background:#aabbd122; }
.reel-scroll-progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,#83b4ff,#f1a676); }
.reel-after { display:grid; grid-template-columns:1fr .72fr; gap:12%; align-items:end; padding:120px 6% 130px; background:#e8eef6; color:#1f314d; }
.reel-after > div { max-width:1540px; }
.reel-after p:first-child { margin:0 0 19px; color:#4776bd; font:700 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.13em; }
.reel-after h2 { margin:0; font-size:clamp(38px,4.2vw,65px); font-weight:650; line-height:1.13; letter-spacing:-.07em; }
.reel-after > div:last-child p { max-width:30em; color:#576a84; font-size:13px; line-height:1.85; }
.reel-after a { display:inline-block; margin-top:10px; padding:0 0 9px; border-bottom:1px solid #345e9a; color:#27548f; font-size:12px; }
.reel-bottom-nav { display:flex; justify-content:space-between; gap:20px; padding:37px 6% 70px; background:#e8eef6; color:#3f587a; border-top:1px solid #aebed22f; font-size:12px; }
.reel-site-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:105px; padding:28px 6%; background:#101726; color:#aab9d0; font-size:10px; }
.reel-site-footer .logo { color:white; }
@media(max-width:1000px) { .reel-layout { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:1%; } .reel-object-area { --cube-size:min(39vw,calc(100svh - 245px),430px); } .reel-copy h1 { font-size:clamp(52px,6vw,76px); } .reel-current h2 { font-size:clamp(27px,3.6vw,39px); } }
@media(max-width:760px) { .reel-sticky { min-height:0; } .reel-layout { display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; gap:2px; padding:55px 7% 75px; } .reel-header,.reel-footer { left:7%; right:7%; } .reel-header span { display:none; } .reel-copy { flex:none; max-width:none; } .reel-eyebrow { font-size:8px; } .reel-copy h1 { margin:5px 0 6px; font-size:clamp(43px,10vw,66px); } .reel-intro { display:none; } .reel-rule { display:none; } .reel-current { min-height:0; } .reel-current #reel-current-index { margin:5px 0; font-size:8px; } .reel-current #reel-current-kind { margin-bottom:5px; font-size:8px; } .reel-current h2 { min-height:0; margin-bottom:3px; font-size:clamp(23px,5.4vw,35px); } .reel-current h2 br { display:none; } .reel-current #reel-current-description { font-size:9px; } .reel-caveat { margin-top:9px; font-size:8px; } .reel-object-area { --cube-size:min(61vw,calc(100svh - 360px),390px); flex:1; min-height:0; padding:0; } .reel-perspective { height:calc(var(--cube-size) * 1.25); } .reel-face-caption strong { font-size:clamp(18px,4.7vw,33px); } .reel-face-caption span { margin-bottom:6px; font-size:7px; } .reel-face-caption small { margin-top:8px; font-size:6px; } .reel-player { width:min(88%,360px); margin-top:-5px; padding:8px 10px; } .reel-footer { bottom:22px; } .reel-step-dots { gap:9px; } .reel-navigate span { display:none; } .reel-after { display:block; padding:85px 7%; } .reel-after > div:last-child { margin-top:29px; } }
@media(max-width:480px) { .reel-layout { padding-top:52px; padding-bottom:67px; } .reel-header { top:15px; font-size:8px; } .reel-copy h1 { font-size:clamp(38px,10.7vw,55px); } .reel-current h2 { font-size:24px; } .reel-current #reel-current-description { display:none; } .reel-caveat { color:#c0cde0; font-size:9px; } .reel-object-area { --cube-size:min(70vw,calc(100svh - 312px),310px); } .reel-face-caption small { font-size:8px; } .reel-player { width:min(94%,320px); } .reel-footer { bottom:17px; } .reel-step-dots { gap:3px; } .reel-step-dots button { min-width:32px; min-height:38px; font-size:8px; } .reel-navigate button { width:36px; height:36px; } .reel-after h2 { font-size:37px; } .reel-bottom-nav { flex-direction:column; } .reel-site-footer { flex-wrap:wrap; } }
@media(max-width:480px) and (max-height:720px) { .reel-layout { padding-top:46px; padding-bottom:58px; } .reel-copy h1 { font-size:36px; } .reel-caveat { margin-top:5px; } .reel-object-area { --cube-size:min(56vw,calc(100svh - 457px),220px); } .reel-perspective { height:calc(var(--cube-size) * 1.15); } .reel-player { margin-top:20px; } }
@media(max-height:680px) and (min-width:761px) { .reel-layout { padding-top:43px; padding-bottom:62px; } .reel-object-area { --cube-size:min(34vw,calc(100svh - 187px),410px); } .reel-copy h1 { font-size:clamp(45px,5vw,70px); } .reel-intro { font-size:10px; } .reel-rule { margin:20px 0; } .reel-current { min-height:135px; } .reel-current h2 { font-size:31px; } .reel-current #reel-current-index { margin-bottom:8px; } }
@media(prefers-reduced-motion:reduce) { .reel-face *,.reel-step-dots button::after { animation:none!important; transition:none!important; } .reel-cube { will-change:auto; } }

/* Real films retain their original framing on each physical cube face. */
.reel-face::after { background:linear-gradient(180deg,#040b1780,transparent 12%,transparent 86%,#040b1799); }
.reel-face-video { display:block; }
.reel-face-caption { bottom:3%; left:5%; right:5%; flex-direction:row; justify-content:space-between; align-items:center; gap:10px; }
.reel-face-caption strong { font-size:clamp(9px,1vw,14px); line-height:1.3; letter-spacing:0; font-weight:500; }
.reel-face-caption small { margin:0; font-size:9px; }
.reel-current h2 { min-height:1.2em; font-size:clamp(28px,3vw,43px); overflow-wrap:anywhere; }
.reel-current { min-height:150px; }
.reel-player { width:min(100%,510px); gap:10px; margin-top:8px; }
#reel-player-time { white-space:nowrap; color:#b8c8df; font:600 9px/1 ui-monospace,monospace; }
#reel-seek { min-width:35px; width:100%; height:22px; flex:1; margin:0; accent-color:var(--reel-orange); cursor:pointer; }
.reel-player #reel-sound,.reel-player #reel-open { flex:0 0 auto; width:auto; border-radius:4px; padding:0 7px; font-size:10px; white-space:nowrap; }
.reel-after { display:block; }
.reel-library-heading { display:flex; justify-content:space-between; align-items:end; gap:10%; margin-bottom:48px; }
.reel-library-heading > p { max-width:27em; font-size:12px; line-height:1.9; color:#576a84; }
.reel-library { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 20px; }
.reel-film-card { padding:0; text-align:left; min-width:0; }
.reel-film-thumb { display:block; aspect-ratio:16/11; background:#101726; position:relative; overflow:hidden; }
.reel-film-thumb img { width:100%; height:100%; object-fit:contain; display:block; transition:transform .35s; }
.reel-film-thumb > span { position:absolute; right:12px; bottom:12px; color:white; display:grid; place-items:center; width:30px; height:30px; border:1px solid #ffffff6a; border-radius:50%; background:#10172690; font-size:10px; }
.reel-film-card:hover img { transform:scale(1.035); }
.reel-film-name { display:flex; align-items:baseline; gap:12px; margin-top:14px; color:#1f314d; }
.reel-film-name small { color:#75839a; font:10px ui-monospace,monospace; }
.reel-film-name strong { font-size:13px; font-weight:550; overflow-wrap:anywhere; }
.reel-film-name > span { margin-left:auto; }
body.viewer-open { overflow:hidden; }
.reel-viewer { max-width:min(1100px,95vw); width:95vw; padding:16px; border:1px solid #93a7c447; border-radius:8px; background:#101726; color:white; }
.reel-viewer::backdrop { background:#050912de; backdrop-filter:blur(14px); }
.reel-viewer-top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; }
.reel-viewer-top h2 { font-size:17px; margin:0; font-weight:500; letter-spacing:0; }
.reel-viewer-top button { padding:8px 12px; color:white; border:1px solid #ffffff4d; border-radius:4px; font-size:12px; }
.reel-viewer video { display:block; width:100%; max-height:77svh; background:#050912; }
@media(max-width:1000px) { .reel-library { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
  .reel-current { min-height:0; }
  .reel-current h2 { font-size:26px; }
  .reel-player { width:100%; padding:8px; gap:7px; }
  .reel-library-heading { display:block; }
  .reel-library-heading > p { margin-top:22px; }
  .reel-after .reel-library { margin-top:0; }
  .reel-footer { gap:10px; }
  .reel-step-dots { gap:2px; }
  .reel-step-dots button { min-width:25px; }
  .reel-navigate { gap:5px; }
  .reel-navigate button { width:30px; height:32px; }
  .reel-viewer { padding:10px; }
}
@media(max-width:380px) {
  .reel-step-dots button { min-width:23px; }
  .reel-player { flex-wrap:wrap; justify-content:center; }
  #reel-seek { min-width:70px; }
  .reel-player #reel-sound,.reel-player #reel-open { font-size:9px; padding:0 5px; }
}

.reel-face-top,.reel-face-caption { position:absolute; z-index:2; }
.reel-face-top { top:4%; left:5%; right:5%; display:flex; justify-content:space-between; color:#e8f0ffbd; font:600 clamp(7px,.72vw,10px)/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; }
.reel-face-top b { font:inherit; }
.reel-face-caption { display:flex; }
.reel-face-caption small { color:#d9e4f3aa; }

/* Film notes accompany the title in the cube, collection and expanded view. */
.reel-current { min-height:184px; }
.reel-current #reel-current-description { max-width:31em; font-size:12px; line-height:1.85; }
.reel-current #reel-current-meta { margin:10px 0 0; color:#8192ad; font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.reel-film-kind { display:block; margin:11px 0 6px; color:#4776bd; font-size:10px; }
.reel-film-description { display:block; color:#576a84; font-size:11px; line-height:1.85; }
.reel-viewer-description { margin:0 0 15px; max-width:65em; color:#b9c6d8; font-size:12px; line-height:1.8; }
@media(max-width:760px) {
  .reel-current { min-height:0; }
  .reel-current #reel-current-description { display:block; max-width:37em; font-size:10px; line-height:1.65; }
  .reel-current #reel-current-meta { display:none; }
  .reel-film-name { gap:7px; }
  .reel-film-name strong { font-size:12px; }
  .reel-film-description { font-size:10px; }
}
@media(max-width:480px) {
  .reel-current h2 { font-size:24px; }
  .reel-current #reel-current-description { margin-top:6px; }
  .reel-object-area { --cube-size:min(62vw,calc(100svh - 495px),310px); }
}
@media(max-width:480px) and (max-height:720px) {
  .reel-object-area { --cube-size:min(48vw,calc(100svh - 487px),220px); }
  .reel-current #reel-current-kind { display:none; }
  .reel-caveat { margin-top:5px; }
}