@font-face{font-family:Optimo;src:url('assets/display.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Text;src:url('assets/sans.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:dark;--ink:#dedbd0;--muted:#b3b8ad;--ground:#000;--gutter:6vw;background:#000}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink)}
body{font-family:Text,Arial,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
button[hidden]{display:none}
a:focus-visible,button:focus-visible{outline:2px solid #dedbd0;outline-offset:6px}
::selection{background:#dedbd0;color:#101311}
.landing{position:relative;isolation:isolate;overflow:clip;container-type:size;height:100svh;height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);padding:32px var(--gutter) 79px;background:#000}
.scene{position:absolute;inset:0;overflow:clip;transform:scale(1.035);animation:find-focus 2.8s ease-out both}
.scene picture{display:block;width:100%;height:100%}
.poster{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1) contrast(1.12) brightness(.73)}
.background-film{position:absolute;z-index:-1;inset:0;overflow:clip;pointer-events:none;transform:scale(1.035);filter:grayscale(1) contrast(1.12) brightness(.73)}
.background-film iframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100cqw,177.78cqh);height:max(56.25cqw,100cqh);border:0;opacity:1;transition:none}
.ambient-visible .scene{visibility:hidden}
.depth{position:absolute;inset:-3%;pointer-events:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);mask-image:radial-gradient(ellipse 45% 42% at 54% 43%,transparent 20%,#0004 64%,#000 100%);-webkit-mask-image:radial-gradient(ellipse 45% 42% at 54% 43%,transparent 20%,#0004 64%,#000 100%)}
.haze{position:absolute;inset:-12%;pointer-events:none;opacity:.6;background:radial-gradient(ellipse 20% 48% at 12% 45%,#a58b6a35,transparent 90%),radial-gradient(ellipse 25% 50% at 92% 30%,#627a7826,transparent 88%),linear-gradient(105deg,#030a0d80,transparent 28%,transparent 76%,#050c0b70);filter:blur(38px);animation:light-drift 22s ease-in-out infinite alternate}
.shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 80% at 54% 40%,transparent 25%,#03090833 65%,#030707d9 100%),linear-gradient(180deg,#000b,transparent 25%,transparent 50%,#080d0d77 77%,#000 100%)}
.grain{position:absolute;inset:0;pointer-events:none;background:url('assets/grain.svg') repeat;background-size:180px 180px;opacity:.24;mix-blend-mode:overlay;animation:grain-drift .35s steps(2) infinite}
.topbar,.identity{position:relative;z-index:1}
.artist-heading{position:relative}
.ambient-play{display:none;position:absolute;z-index:2;right:0;bottom:calc(100% + 48px);width:48px;height:48px;border:1px solid #dedbd080;border-radius:0;background:#0003;color:var(--ink);touch-action:manipulation}
.ambient-play svg{display:block;width:20px;height:20px;margin:auto}
.ambient-play span{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%);white-space:nowrap;font:9px/1.5 monospace;letter-spacing:.15em}
.ambient-play:active{background:#0008;border-color:var(--ink)}
.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;color:var(--muted);font:10px/1.5 monospace;letter-spacing:.12em}
.topbar p{margin:0}.topbar button{justify-self:end;min-height:44px;font-size:9px;letter-spacing:.08em}
.nav-logo{display:block;width:152px;min-height:44px;color:var(--ink);line-height:0}
.nav-logo svg{display:block;width:100%;aspect-ratio:1726/780;overflow:hidden}
.identity{align-self:end;padding:80px 0 70px}
h1{display:flex;align-items:baseline;gap:.13em;white-space:nowrap;font:700 clamp(96px,21vw,340px)/.75 Optimo,Impact,sans-serif;letter-spacing:-.035em;margin:0;color:var(--ink)}
h1 span{font:inherit;letter-spacing:inherit;color:inherit}
.links{display:flex;flex-wrap:wrap;gap:8px 36px;align-items:center;margin-top:36px;font:11px/1.5 monospace;color:#d2d7c8}
.links a{display:inline-flex;align-items:center;gap:24px;min-height:44px;border-bottom:1px solid #c0c9b433;transition:border-color .2s,color .2s}
.links a:hover{border-color:#d2d7c8;color:#fff}
.links span{font-size:17px}
dialog{width:min(1280px,calc(100% - 48px),calc((100svh - 200px)*16/9 + 48px));max-height:calc(100svh - 32px);padding:24px;background:#000;color:var(--ink);border:1px solid #dedbd021;box-shadow:0 30px 120px #000;overflow:auto}
dialog::backdrop{background:#000e;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.film-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid #dedbd026}
.film-header p{margin:0;color:var(--muted);font:9px/1.7 monospace;letter-spacing:.08em}
.film-logo{display:block;width:112px;aspect-ratio:1726/780;overflow:hidden}
.close{justify-self:end;display:inline-flex;align-items:center;gap:16px;min-height:44px;font:10px/1.5 monospace;letter-spacing:.06em;border-bottom:1px solid #dedbd040;transition:color .2s,border-color .2s}
.close span{font-size:22px;line-height:1}.close:hover{color:#fff;border-color:var(--ink)}
#film-player{background:#000}
#film-player iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
body.modal-open{overflow:hidden}
.motion-paused .scene{animation:none;filter:none}
.motion-paused .grain,.motion-paused .haze{animation-play-state:paused}
@keyframes find-focus{from{filter:blur(4px)}to{filter:none}}
@keyframes light-drift{from{transform:translate(-1.8%,0) scale(1.02)}to{transform:translate(1.8%,1%) scale(1.04)}}
@keyframes grain-drift{0%{background-position:0 0}25%{background-position:60px -80px}50%{background-position:-90px 40px}75%{background-position:50px 90px}}
@media(max-width:700px),(pointer:coarse){.ambient-play:not([hidden]){display:block}}
@media(max-width:700px){
 .landing{padding-top:20px;padding-bottom:75px}
 .topbar{font-size:9px;letter-spacing:.08em;gap:12px}.topbar button{font-size:8px}.nav-logo{width:104px}
 .identity{padding-bottom:55px}
 h1{font-size:21vw;line-height:.8}
 .links{gap:8px 20px;margin-top:28px;font-size:10px}.links a{gap:12px}
 .depth{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);mask-image:radial-gradient(ellipse 52% 40% at 52% 43%,transparent 35%,#0007 75%,#000 100%);-webkit-mask-image:radial-gradient(ellipse 52% 40% at 52% 43%,transparent 35%,#0007 75%,#000 100%)}
 .haze{filter:blur(25px);opacity:.4}.grain{background-size:170px 170px}
 dialog{padding:16px;width:min(calc(100% - 24px),calc((100svh - 148px)*16/9 + 32px))}.film-header{gap:12px;padding-bottom:16px;margin-bottom:16px}.film-header p{font-size:8px;letter-spacing:.04em;max-width:100px}.film-logo{width:80px}.close{font-size:9px;gap:10px}
}
@media(max-width:360px){.topbar{font-size:8px;letter-spacing:.04em;gap:8px}.nav-logo{width:88px}}
@media(max-height:600px){
 .landing{padding-top:16px;padding-bottom:49px}
 .topbar{font-size:9px;gap:12px}.nav-logo{width:104px}
 .identity{padding:12px 0 24px}
 h1{font-size:min(21vw,30svh);font-size:min(21vw,30dvh)}
 .links{margin-top:18px}
}
@media(max-height:420px){
 .ambient-play{bottom:calc(100% + 12px)}.ambient-play span{display:none}
 .landing{padding-top:10px;padding-bottom:41px}
 .topbar{font-size:8px;letter-spacing:.06em}.nav-logo{width:88px}
 .identity{padding:8px 0 16px}
 .links{margin-top:12px;gap:4px 20px;font-size:10px}.links a{gap:12px}
}
@media(prefers-reduced-motion:reduce){.scene,.haze,.grain{animation:none}.scene{filter:none}.background-film iframe{transition:none}}