:root{--paper:#e9e8e2;--ink:#292b27;--muted:#70736b;--line:rgba(36,38,34,.18);--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;--serif:Georgia,'Times New Roman',serif}
*{box-sizing:border-box}
:root{color-scheme:light;--dialog-paper:#f0efe9;--dialog-backdrop:rgba(39,42,35,.24)}
:root[data-theme="dark"]{color-scheme:dark;--paper:#080c18;--ink:#eceef5;--muted:#b0b9ce;--line:rgba(173,188,232,.19);--dialog-paper:#111827;--dialog-backdrop:rgba(0,0,0,.5)}
[data-theme="dark"] ::selection{background:#465799;color:#fff}
[data-theme="dark"] .skip-link{color:#080c18}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--paper);color:var(--ink);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button,a{font:inherit;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
::selection{background:#cbd1c5;color:#151714}
.skip-link{position:fixed;left:20px;top:-60px;z-index:30;padding:10px 16px;background:var(--ink);color:white}
.skip-link:focus{top:14px}
.film-header{position:fixed;z-index:12;inset:0 0 auto;height:82px;padding:0 clamp(24px,3.5vw,64px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;pointer-events:none}
.film-header>*{pointer-events:auto}
.film-home{justify-self:start;font-size:20px;font-weight:600;letter-spacing:-.065em}
.home-dot{color:#67837b}
.header-label{grid-column:2;font-size:11px;letter-spacing:.12em;color:var(--muted)}
.film-close{justify-self:end;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.film-close span{font-size:23px;font-weight:300;line-height:1}
.film-close:hover{color:var(--ink)}
.scroll-gallery,.gallery-viewport,.gallery-track,.film-grid{position:absolute;inset:0}
.gallery-viewport{overflow:hidden;isolation:isolate}
.film-grid{touch-action:none;cursor:grab;outline:none;user-select:none;visibility:hidden}
.film-grid.is-ready,.film-grid.film-grid-error{visibility:visible}
.film-grid:not(.is-ready) .film-card{visibility:hidden!important}
.film-grid.is-dragging,.is-dragging .film-card{cursor:grabbing}
.film-card{position:absolute;left:0;top:0;display:block;appearance:none;border:0;padding:0;background:none;height:110px;aspect-ratio:2/3;cursor:pointer;will-change:transform}
.film-poster{display:block;width:100%;height:100%;background-image:url('assets/films-atlas-v1.webp');background-size:1000% 1000%;background-repeat:no-repeat;opacity:var(--presence,.1);filter:saturate(var(--saturation,.2));user-select:none}
.film-card.is-hovered .film-poster,.film-card:focus-visible .film-poster{opacity:1;filter:saturate(1)}
.film-card.is-hovered,.film-card:focus-visible{z-index:2}
.is-dragging .film-poster{opacity:var(--presence);filter:saturate(var(--saturation))}
.credits-trigger,.scroll-note{position:absolute;z-index:4;bottom:34px;color:var(--muted);font-size:12px}
.credits-trigger{left:clamp(24px,3.5vw,64px);background:none;border:0;padding:6px 0;cursor:pointer}
.credits-trigger:hover{color:var(--ink)}
.game-entry{position:absolute;z-index:4;bottom:34px;left:50%;transform:translateX(-50%);padding:6px 0;font-size:12px;color:var(--muted);white-space:nowrap;transition:color .2s,opacity .6s}
.game-entry:hover{color:var(--ink)}
.film-focused .game-entry{opacity:0;pointer-events:none}
@media(max-width:600px){.game-entry{bottom:19px;font-size:11px}.scroll-note{display:none}}
@media(prefers-reduced-motion:reduce){.game-entry{position:fixed;bottom:0;left:auto;right:20px;transform:none;padding:15px 0;z-index:5}}
.scroll-note{right:clamp(24px,3.5vw,64px);bottom:40px;pointer-events:none}
.film-dialog{position:fixed;max-width:min(740px,calc(100vw - 32px));max-height:calc(100dvh - 40px);width:100%;padding:35px;border:0;background:var(--dialog-paper);color:var(--ink);box-shadow:0 32px 85px rgba(0,0,0,.12)}
.film-dialog::backdrop{background:var(--dialog-backdrop);backdrop-filter:blur(12px)}
.dialog-close{position:absolute;top:13px;right:17px;background:none;border:0;padding:4px;font-size:27px;font-weight:300;line-height:1;color:var(--muted);cursor:pointer}
.dialog-layout{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:35px;align-items:center}
.dialog-layout>img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover}
.dialog-eyebrow{font-size:10px;letter-spacing:.1em;color:var(--muted)}
.dialog-eyebrow span{margin-left:12px}
.dialog-copy h2{margin:16px 0 7px;font:400 clamp(32px,4vw,55px)/1.13 var(--serif);letter-spacing:-.045em;overflow-wrap:anywhere}
.dialog-copy>p:nth-of-type(2){color:var(--muted);font-size:14px}
.dialog-links{display:flex;gap:24px;margin-top:36px;font-size:13px}
.dialog-links a{padding-bottom:5px;border-bottom:1px solid var(--line)}
.dialog-links span{margin-left:10px}
.credits-dialog{max-width:440px;padding:42px}
.film-credits h2{font:400 32px/1.2 var(--serif);margin:0 0 25px}
.credits-copy{font-size:13px;line-height:1.8;color:var(--muted)}
.tmdb-credit{display:inline-flex;align-items:center;gap:12px;font-weight:600}
.tmdb-credit img{display:block;width:40px;height:29px;object-fit:contain}
.film-grid-error{display:grid;place-content:center;padding:40px;color:var(--muted)}
.gallery-track{transition:opacity .8s ease,filter .8s ease}
.film-header,.scroll-note,.credits-trigger{transition:opacity .6s ease}
.film-focused .gallery-track{opacity:.8}
@media(max-width:600px){.film-focused .gallery-track{mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}}
@media(prefers-reduced-motion:reduce){.film-focused .gallery-track{opacity:.12}}
.film-focused .film-header,.film-focused .scroll-note,.film-focused .credits-trigger{opacity:0}
.film-card.is-selected .film-poster{visibility:hidden}
.film-stage{inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;background:transparent;box-shadow:none;overflow:hidden;touch-action:none}
.film-stage::backdrop{background:transparent;backdrop-filter:none}
.film-stage .dialog-layout{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;height:100%;padding:64px 25px 36px;pointer-events:none}
.film-stage .dialog-layout>img{width:auto;height:min(53dvh,480px);max-width:75vw;max-height:none;aspect-ratio:2/3;object-fit:contain;transform-origin:top left;pointer-events:auto;will-change:transform}
.film-stage .dialog-copy{text-align:center;width:min(440px,86vw);pointer-events:auto;animation:copy-arrive .65s .35s both}
.film-stage .dialog-eyebrow{display:none}
.film-stage .dialog-copy h2{font:400 clamp(25px,3.2vw,43px)/1.12 var(--serif);letter-spacing:-.035em;margin:0 0 10px}
.film-stage .dialog-copy>p:nth-of-type(2){margin:0;font-size:12px}
.film-stage .dialog-links{justify-content:center;gap:26px;margin-top:18px;font-size:12px}
.film-stage .dialog-close{position:fixed;top:27px;right:clamp(24px,3.5vw,64px);display:flex;align-items:center;gap:14px;font:400 13px/1 var(--sans);padding:6px 0;z-index:2;animation:copy-arrive .5s .2s both}
.film-stage .dialog-close span{font-size:25px;font-weight:300}
.film-stage.is-closing .dialog-copy,.film-stage.is-closing .dialog-close{animation:copy-leave .2s both;pointer-events:none}
@keyframes copy-arrive{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
@keyframes copy-leave{from{opacity:1}to{opacity:0}}
@media(max-width:600px){.film-header{height:70px}.header-label{font-size:10px;letter-spacing:.025em}.film-home{font-size:18px}.film-close{font-size:12px;gap:8px}.credits-trigger,.scroll-note{bottom:19px;font-size:11px}.scroll-note{bottom:25px}.film-dialog{padding:42px 24px 28px}.dialog-layout{grid-template-columns:1fr;gap:16px}.dialog-layout>img{max-height:38dvh;width:auto;max-width:100%;margin:auto}.dialog-copy h2{font-size:32px}.dialog-links{margin-top:22px}.credits-dialog{padding:38px 28px}}
@media(max-width:600px){.film-stage{padding:0}.film-stage .dialog-layout{gap:22px;padding:68px 20px 35px}.film-stage .dialog-layout>img{height:min(49dvh,420px);max-height:none;margin:0}.film-stage .dialog-copy h2{font-size:29px}.film-stage .dialog-close{top:22px}.film-stage .dialog-copy>p:nth-of-type(2){font-size:11px}}
@media(max-height:530px){.film-stage .dialog-layout{flex-direction:row;gap:35px;padding:60px 40px 30px}.film-stage .dialog-layout>img{height:70dvh;max-width:32vw}.film-stage .dialog-copy{width:min(390px,48vw);text-align:left}.film-stage .dialog-copy h2{font-size:27px}.film-stage .dialog-links{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){html,body{height:auto;overflow:auto}.film-header{background:var(--paper)}.scroll-gallery,.gallery-viewport,.gallery-track{position:relative;inset:auto}.film-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:38px 24px;padding:115px 25px 100px;touch-action:auto;cursor:auto}.film-card{position:relative;height:auto;width:100%;visibility:visible!important;transform:none!important}.film-poster{opacity:1;filter:none}.scroll-note{display:none}.credits-trigger{position:fixed;bottom:0;left:0;right:0;background:var(--paper);padding:15px}*,*:before,*:after{transition:none!important;animation:none!important}}