/* Inter (SIL Open Font License, /fonts/OFL.txt): the same files skyfallstatus.com hosts, kept here because browsers keep a separate cache per site, so a copy read from skyfallstatus.com was downloaded again anyway. Same type and spacing as skyfallstatus.com; the entrance follows benji.org's home page. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-v20-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-v20-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:light;--ink:#111;--muted:rgba(0,0,0,.4);--rule:#f2f2f2;--paper:#fdfdfc}
*{box-sizing:border-box}
/* Chrome would otherwise re-anchor its restored scroll against the rising entrance text and settle 8px off after a refresh. */
html{background:var(--paper);overflow-anchor:none}
body{margin:0;overflow-y:scroll;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;line-height:20px;font-weight:460;letter-spacing:-.09008px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;z-index:5;pointer-events:none;top:0;left:0;right:0;height:128px;background:linear-gradient(180deg,#fff 0,hsla(0,0%,100%,.738) 19%,hsla(0,0%,100%,.541) 34%,hsla(0,0%,100%,.382) 47%,hsla(0,0%,100%,.278) 56.5%,hsla(0,0%,100%,.194) 65%,hsla(0,0%,100%,.126) 73%,hsla(0,0%,100%,.075) 80.2%,hsla(0,0%,100%,.042) 86.1%,hsla(0,0%,100%,.021) 91%,hsla(0,0%,100%,.008) 95.2%,hsla(0,0%,100%,.002) 98.2%,transparent)}
main{width:100%;max-width:582px;padding:80px 16px 40px;margin:0 auto;outline:none}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:transparent;border-radius:100px}:hover::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15)}
::selection{color:#111;background:#ededed}
h1,p{margin:0;font:inherit}h1{font-weight:500}
.muted,.updated{color:var(--muted)}.updated{margin-top:4px}
.introduction{margin-top:24px;display:grid;gap:16px}
/* No single word left alone on a paragraph's last line (browsers without support keep normal wrapping). */
.introduction p{text-wrap:pretty;text-align:start;word-spacing:0;letter-spacing:-.09008px}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.introduction a{text-decoration:underline;text-decoration-color:#d9d9d9;text-underline-offset:2px;transition:text-decoration-color .2s ease}
.introduction a:hover{text-decoration-color:#666}
a:focus-visible{outline:2px solid #787876;outline-offset:5px;border-radius:2px}
.skip{position:fixed;left:16px;top:-60px;background:white;padding:10px;z-index:10}.skip:focus{top:10px}
[hidden]{display:none!important}
.work{margin-top:48px}.work h2{line-height:normal;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.year-group{display:grid;grid-template-columns:108px minmax(0,1fr);border-bottom:1px solid var(--rule)}
.year-group:last-child{border-bottom:0}
.year{padding-top:11.76px;line-height:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.year-list{margin:0;padding:0;list-style:none;min-width:0}
.year-list li:not(:last-child){background:linear-gradient(var(--rule),var(--rule)) bottom / 100% 1px no-repeat}
.project-link{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11.76px 0;position:relative;line-height:normal}
.project-link>span{position:relative}.project-title{min-width:0;transition:opacity .14s ease}.project-type{color:var(--muted);font-size:14px;white-space:nowrap;transition:opacity .14s ease}
@media(min-width:520px){.work-list:hover .project-title,.work-list:hover .project-type{opacity:.3}.work-list .project-link:hover .project-title,.work-list .project-link:hover .project-type{opacity:1}}
.project-link:hover .project-type{color:#555}
h2,h3{margin:0;font:inherit}h2{color:var(--muted)}
/* Index link: pinned where benji.org pins it, in the page flow once the column would reach it. */
.back{position:fixed;top:80px;left:80px;display:flex;align-items:center;gap:4px;padding:4px 0;color:rgba(0,0,0,.4);font-size:14px;font-weight:460;line-height:20px;letter-spacing:-.00563rem;transition:color .1s ease}.back:hover{color:rgba(0,0,0,.8)}
.back-arrow{display:block;flex:none;width:14px;height:14px}
/* Section index under the Index link, 1:1 with benji.org: 30px below it, a 13px title slot, links 8px apart, one line each. Hidden at 1199px and below (benji.org: 1080px), so the longest one-line entry stays 24px clear of the column (at 1144px it touched it). Like there, the Index link and the list sit under the top fade (no z-index), which is what greys "Index" a little. */
.toc{position:fixed;top:138px;left:80px;max-height:calc(100vh - 178px);overflow-y:auto}.toc-title{display:block;font-size:13px;font-weight:460;line-height:1.2;letter-spacing:-.0025rem;padding:0 0 16px;visibility:hidden}.toc ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}.toc a{display:block;white-space:nowrap;color:hsla(0,0%,7%,.4);font-size:13px;font-weight:460;line-height:1.2;letter-spacing:-.0025rem;transition:color .1s ease}.toc a:hover{color:hsla(0,0%,7%,.8)}
/* benji.org keeps an invisible title slot above the list; it only shows it through script, so here it simply stays hidden. */
[id]{scroll-margin-top:96px}
/* Entrance on every load, timed like benji.org's home page: the name, then each line, rise in 50ms apart, and the list (or a page's films) follows the text.
   build.mjs gives each block after the text its step as a class: iN starts it at N × 50ms. */
@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.back,.toc,#index-view>header,.introduction>p,#index-view>.work{animation:reveal .5s ease both;animation-delay:calc(var(--i,0)*50ms)}
.introduction>p:nth-child(1){--i:1}.introduction>p:nth-child(2){--i:2}.introduction>p:nth-child(3){--i:3}.introduction>p:nth-child(4){--i:4}.introduction>p:nth-child(5){--i:5}.introduction>p:nth-child(n+6){--i:6}
.i1{--i:1}.i2{--i:2}.i3{--i:3}.i4{--i:4}.i5{--i:5}.i6{--i:6}.i7{--i:7}.i8{--i:8}.i9{--i:9}.i10{--i:10}.i11{--i:11}.i12{--i:12}.i13{--i:13}.i14{--i:14}.i15{--i:15}.i16{--i:16}
@media(max-width:1199px){.toc{display:none}}
/* Below 1080px the Index link joins the flow where benji.org puts it: at 80px, the title 32px under it (the home page keeps its title at 80px); at 32px on phones. */
@media(max-width:1080px){.back{position:static;max-width:582px;margin:80px auto 0;padding:4px 16px}main{padding-top:80px}body:has(.back) main{padding-top:32px}}
@media(max-width:768px){.back{padding:4px 24px;margin-top:32px}main{padding:32px 24px 40px}body:before{height:40px}}
@media(max-width:520px){.year-group{grid-template-columns:48px minmax(0,1fr)}.project-type{white-space:normal;text-align:right}}
/* Smooth scrolling only while the side index is in use: Chrome animates its own scroll restoration otherwise, so a reload on a scrolled page would scroll down through the whole page. */
@media(prefers-reduced-motion:no-preference){html:has(.toc:hover,.toc:focus-within){scroll-behavior:smooth}}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}
/* Loops and stills: column width, no breakout, silent loops played like images. */
.moodboard{margin-top:40px;display:grid;gap:40px}
.moodboard figure{margin:0;min-width:0}
.moodboard img,.moodboard video{display:block;width:100%;height:auto;background:var(--paper)}
.moodboard .pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.moodboard .supporting{margin-top:12px}
@media(max-width:400px){.moodboard .pair{gap:8px}}
.moodboard figcaption{margin-top:8px;color:var(--muted)}
.moodboard figure .pair+.pair{margin-top:12px}
/* Captions can link to the film page. */
.moodboard figcaption a{transition:color .1s ease}.moodboard figcaption a:hover{color:rgba(0,0,0,.8)}
.moodboard figure>a{display:block}
/* Written sections on a film page: same text as the introduction, a grey heading above each. */
.writing{margin-top:40px;display:grid;gap:16px}.writing h2{line-height:normal}.writing p{text-wrap:pretty}
#index-view>.writing{animation:reveal .5s ease both;animation-delay:calc(var(--i,2)*50ms)}
/* Credits: one small paragraph, each role then name, never broken across lines. */
.writing .moodboard{margin-top:8px}.writing .credits{margin-top:0}.writing+.writing{margin-top:72px}
.credits{margin-top:40px;font-size:13px;line-height:20px;color:rgba(0,0,0,.6)}.credits p{text-wrap:pretty}.credit{white-space:nowrap;margin-right:12px}.credit .role{color:var(--muted)}.credits a{color:var(--ink);transition:color .1s ease}.credits a:hover{color:rgba(0,0,0,.6)}.watch+.credits{margin-top:8px}
#index-view>.credits{animation:reveal .5s ease both;animation-delay:calc(var(--i,2)*50ms)}
/* On phones a credit that does not fit moves to the next line whole, role and name together. */
@media(max-width:520px){.credit{display:inline-block;max-width:100%;white-space:normal}.work-list .project-type{white-space:nowrap}}
#index-view>.moodboard{animation:reveal .5s ease both;animation-delay:calc(var(--i,2)*50ms)}