/* Peter's yellow wordmark, violet night sky and analogue light. */
:root{--ink:#14111f;--cream:#f6f2e8;--accent:#f4df37;--line:#c6b8e128}
body,.home{--accent:#f4df37;background-color:#14111f}
body.inner{background-image:radial-gradient(ellipse at 90% 18%,#65509c25,transparent 42%),radial-gradient(ellipse at 10% 68%,#3c356622,transparent 40%)}
.inner:before{background:none!important}
.wordmark{height:32px;overflow:hidden}.brand-wordmark{display:block;width:164px;height:57px;max-height:none;object-fit:contain}
.hero-wordmark{display:block;width:min(36vw,500px);height:clamp(68px,7vw,96px);object-fit:cover;object-position:center;filter:drop-shadow(0 5px 16px #08050a66)}
.home .chapter-copy{max-width:44vw}
.chapter h1 em,.chapter h2 em,.has-journey[data-step="2"] .chapter h2 em,.has-journey[data-step="3"] .chapter h2 em,.media-hero h1 em{color:#f4df37}
.chapter-label{color:#d4c9e3}.chapter-description{color:#d3ccdc}.chapter-action{border-bottom-color:#eed85766}.chapter-action:hover,.chapter-watch:hover,.journey-index a[aria-current]{color:#f5e350}
.journey-index a[aria-current]:after,.journey-progress i{background:#f4df37}.journey-index a{color:#b9aec8}
.site-header{background:linear-gradient(#14111fe8,#14111f70 65%,transparent)}
.home .site-header{background:linear-gradient(#14111f80,transparent)}
.site-footer{background:#14111f}.site-footer .footer-signature{color:#f4df37}
.media-hero{background:#14111f}.media-hero:after{background:linear-gradient(0deg,#14111ff7 0%,#14111f88 22%,#14111f0d 65%),linear-gradient(90deg,#14111f99,transparent 80%)}
.media-play{border-color:#f4df37a3}.media-watch:hover .media-play{background:#eed33c28}.media-motion-toggle{border-color:#ad95d352}
.project-image-action{border-color:#ddc34d66}.work-type,.journal-entry .category{color:#c8b5e4}.filter-bar button[aria-pressed="true"]{color:#f4df37;border-color:#f4df37}
.native-film{position:absolute;inset:0;width:100%;height:100%}
.media-hero--portrait{background:radial-gradient(ellipse at 75% 35%,#49315f55,transparent 65%),#14111f}
.media-hero--portrait>.ambient-media{left:43%;width:57%;background:transparent}
.media-hero--portrait .ambient-media img,.media-hero--portrait .ambient-media video{object-fit:contain;object-position:center}
.media-hero--portrait:after{background:linear-gradient(90deg,#14111f88,transparent 65%),linear-gradient(0deg,#14111ff5,transparent 28%)}
.media-hero--portrait .media-hero-copy{max-width:43%}
::selection{background:#f4df37;color:#17131f}
@media(max-width:720px){.brand-wordmark{width:128px;height:45px}.hero-wordmark{width:78vw;height:17vw;max-width:410px}.home .chapter-copy{max-width:85vw}.chapter#arrival .chapter-description{max-width:270px;margin-top:24px}.chapter#arrival .chapter-actions{gap:0 22px}.media-hero:after{background:linear-gradient(0deg,#14111ffa,#14111f70 42%,#14111f0d 80%),linear-gradient(90deg,#14111f4d,transparent)}.site-header{padding-inline:7vw}.header-contact{font-size:9px}.home .site-header .header-tools{gap:16px}}
@media(max-width:380px){.brand-wordmark{width:112px;height:39px}.site-header .header-tools{gap:8px}.hero-wordmark{width:80vw}}
@media(max-width:720px){.media-hero--portrait>.ambient-media{left:0;width:100%}.media-hero--portrait .ambient-media img,.media-hero--portrait .ambient-media video{object-fit:cover}.media-hero--portrait .media-hero-copy{max-width:100%}.media-hero--portrait:after{background:linear-gradient(0deg,#14111ff7,#14111f99 36%,transparent 70%)}}
/* Enter a face, then return to the exact point in the cube journey. */
.is-face-panel{width:min(1320px,94vw);height:92svh;max-width:none;max-height:none;margin:auto;padding:0;border:1px solid #cdb4ed80;background:#14111f;box-shadow:0 0 70px #8670c52b}
.is-face-panel::backdrop{background:#100c1db3;backdrop-filter:blur(6px)}
.is-face-panel .portal-shell{padding:0;width:100%;max-width:none;height:100%;overflow:hidden}
.is-face-panel #portal-content{height:100%;display:flex;flex-direction:column}
.is-face-panel .close-portal{position:absolute;left:24px;right:auto;top:14px;z-index:3;font-size:12px;min-height:44px;color:#f4df37}
.face-panel-heading{height:72px;flex:none;display:flex;align-items:center;justify-content:flex-end;gap:24px;padding:0 28px 0 200px;border-bottom:1px solid #c5b2e92b;background:#191323}
.face-panel-heading h2{font:12px/1.5 Arial,sans-serif;letter-spacing:0;color:#e7e0ef}
.face-panel-heading>span{font:8px/1.5 ui-monospace,monospace;letter-spacing:.08em;color:#a391b7}
.face-page{display:block;width:100%;flex:1;min-height:0;border:0;background:#14111f}
dialog.is-face-panel[open] .portal-shell{animation:enter-face .55s cubic-bezier(.22,.7,.22,1) both;transform-origin:65% 50%}
@keyframes enter-face{from{opacity:0;transform:perspective(1400px) rotateY(-6deg) scale(.83)}to{opacity:1;transform:perspective(1400px) rotateY(0) scale(1)}}
.home #spacey-cube{transition:filter .5s,opacity .5s}.home.exploring-face #spacey-cube{filter:blur(2px);opacity:.65}
.inside-cube>.site-header,.inside-cube>.site-footer,.inside-cube>.skip-link{display:none}
.inside-cube .page-main{padding-top:45px}.inside-cube .page-main.media-page{padding-top:0}
.inside-cube .media-hero{min-height:78svh;padding-top:100px}.inside-cube .profile-stage{padding-top:35px}
.inside-cube .media-motion-toggle{position:fixed;right:20px;top:16px;z-index:15;background:#14111f99}
.inside-cube>.site-header:has(.media-motion-toggle){display:block;position:fixed;inset:0;pointer-events:none;background:none;padding:0;height:0}
.inside-cube>.site-header .wordmark,.inside-cube>.site-header .header-contact,.inside-cube>.site-header .menu-trigger{display:none}
.inside-cube>.site-header .media-motion-toggle{pointer-events:auto}
@media(max-width:720px){.is-face-panel{width:100vw;height:100svh;border:0}.is-face-panel .close-portal{left:20px;top:10px;font-size:11px}.face-panel-heading{height:64px;padding:0 20px 0 150px}.face-panel-heading>span{display:none}.face-panel-heading h2{font-size:10px;text-align:right}.inside-cube .page-main{padding-top:35px}.inside-cube .media-hero{min-height:85svh;padding-top:70px}.inside-cube .profile-stage{padding-top:20px}}
@media(prefers-reduced-motion:reduce){dialog.is-face-panel[open] .portal-shell{animation:none}.home #spacey-cube{transition:none}}

/* The projection itself is also the entrance. */
.cube-enter{--cube-size:clamp(285px,30vw,430px);display:none;position:fixed;left:66%;top:50%;width:calc(var(--cube-size)*1.4);height:calc(var(--cube-size)*1.45);transform:translate(-50%,-50%);z-index:4;cursor:pointer;background:transparent;border:0;touch-action:pan-y}
.has-journey .cube-enter{display:block}.cube-enter>span{position:absolute;bottom:-12px;left:50%;transform:translate(-50%,8px);white-space:nowrap;font:10px/1.5 ui-monospace,monospace;letter-spacing:.03em;color:#f4df37;opacity:0;transition:opacity .25s,transform .25s}
.cube-enter:hover>span,.cube-enter:focus-visible>span{opacity:1;transform:translate(-50%,0)}.cube-enter:focus-visible{outline:1px solid #e8cf4280;outline-offset:12px}
#spacey-cube .cube-perspective{transition:transform .65s cubic-bezier(.22,.7,.22,1)}.home.exploring-face #spacey-cube .cube-perspective{transform:translate(-50%,-50%) scale(1.6)}.home.exploring-face .cube-enter{pointer-events:none}
@media(max-width:720px){.cube-enter{--cube-size:clamp(180px,25vh,235px);left:50%;top:63%;width:calc(var(--cube-size)*1.35);height:calc(var(--cube-size)*1.3)}.cube-enter>span{display:none}}
@media(max-width:720px) and (max-height:720px){.cube-enter{top:68%}}
@media(prefers-reduced-motion:reduce){#spacey-cube .cube-perspective,.cube-enter>span{transition:none}}

@media(max-width:720px){.scroll-cue{left:50%;right:auto;top:auto;bottom:25px;transform:translateX(-50%);font-size:8px;gap:6px;white-space:nowrap}.journey-controls #motion-toggle{min-height:44px;height:44px;min-width:44px;width:44px}}
