@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations');
  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: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations');
  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;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(fonts/archivo-latin-ext-wdth-italic.woff2) format('woff2-variations');
  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: 'Archivo';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(fonts/archivo-latin-wdth-italic.woff2) format('woff2-variations');
  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{
  --paper:#ECEDE8;
  --ink:#111311;
  --mute:#5B5F58;
  --line:#C6C9C1;
  --key:#5A34E0;
  --key-deep:#3B1FB0;
  --gutter:clamp(16px,3vw,40px);
  --f:"Archivo",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-size:18px;line-height:1.55;font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased}
img,iframe{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--key);outline-offset:3px}
.pad{padding-left:var(--gutter);padding-right:var(--gutter)}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-top:16px;padding-bottom:14px;background:var(--paper);border-bottom:1px solid var(--line);font-size:15px}
.top .name{font-weight:700;text-decoration:none;letter-spacing:.01em;font-variation-settings:"wdth" 112}
.top nav{display:flex;flex-wrap:wrap;gap:4px 0}
.top nav a{text-decoration:none;color:var(--mute)}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.top nav a+a::before{content:"/";color:var(--line);margin:0 10px}

/* giant type */
.giant{font-weight:800;font-variation-settings:"wdth" 62;text-transform:uppercase;line-height:.82;letter-spacing:-.01em;margin:0}
.wordmark{font-size:clamp(56px,20.3vw,360px);padding-top:clamp(16px,3vw,40px);padding-bottom:clamp(14px,2vw,28px);white-space:nowrap;overflow:hidden}

/* hero frame */
.frame{position:relative;background:#000;aspect-ratio:2.39/1;overflow:hidden;color:#fff}
@media (max-width:700px){.frame{aspect-ratio:4/3}}
.frame img,.frame iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.safe{position:absolute;inset:6%;pointer-events:none}
.safe i{position:absolute;width:26px;height:26px;border-color:rgba(255,255,255,.75);border-style:solid;border-width:0}
.safe i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px}
.safe i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px}
.safe i:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.safe i:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.tc{position:absolute;top:calc(6% + 10px);right:calc(6% + 14px);font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:.04em;font-weight:600}
.tc b{color:var(--key);font-weight:600}
.caption{position:absolute;left:calc(6% + 14px);bottom:calc(6% + 12px);right:calc(6% + 14px);display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.caption p{margin:0;font-size:15px;max-width:30em;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.caption strong{display:block;font-size:clamp(22px,2.6vw,34px);font-weight:800;font-variation-settings:"wdth" 70;text-transform:uppercase;line-height:1}
.play{appearance:none;border:0;cursor:pointer;background:var(--key);color:#fff;font:inherit;font-weight:700;font-size:15px;padding:14px 22px;border-radius:999px;text-decoration:none;display:inline-flex;gap:10px;align-items:center}
.play:hover{background:var(--key-deep)}
.play::before{content:"";width:0;height:0;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
@media (max-width:700px){.safe,.tc{display:none}.caption{left:16px;right:16px;bottom:14px}}

/* intro strip */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(40px,6vw,88px)}
.intro p{margin:0;font-size:clamp(22px,2.4vw,34px);line-height:1.15;font-weight:600;font-variation-settings:"wdth" 88;max-width:16em}
.intro .aside{font-size:17px;line-height:1.55;font-weight:400;font-variation-settings:"wdth" 100;color:var(--mute);max-width:32em;align-self:end}
@media (max-width:760px){.intro{grid-template-columns:1fr}}

/* section heading row */
.row-head{display:flex;justify-content:space-between;align-items:end;gap:20px;border-top:1px solid var(--ink);padding-top:14px;margin-bottom:clamp(20px,3vw,36px)}
.row-head h2{font-size:clamp(44px,8vw,128px)}
.row-head span{font-size:15px;color:var(--mute);font-variant-numeric:tabular-nums}

/* work grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px) var(--gutter);padding-bottom:clamp(56px,8vw,120px)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.card{text-decoration:none;display:block}
.card .shot{aspect-ratio:16/9;overflow:hidden;background:#000;position:relative}
.card .shot img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.card .shot::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--key);transition:box-shadow .2s}
.card:hover .shot::after,.card:focus-visible .shot::after{box-shadow:inset 0 0 0 6px var(--key)}
@media (prefers-reduced-motion:reduce){.card .shot::after{transition:none}}
.card h3{margin:14px 0 2px;font-size:clamp(26px,2.8vw,40px);line-height:.95;font-weight:800;font-variation-settings:"wdth" 66;text-transform:uppercase}
.card p{margin:0;font-size:15px;color:var(--mute)}
@media (max-width:900px){.grid.three{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid,.grid.three{grid-template-columns:1fr}}

/* film page */
.film-head{padding-top:clamp(24px,4vw,56px);padding-bottom:clamp(18px,2.5vw,30px)}
.film-head h1{font-size:clamp(56px,12vw,200px)}
.film-head .meta{margin:16px 0 0;font-size:17px;color:var(--mute)}
.player{position:relative;aspect-ratio:16/9;background:#000}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.players{display:grid;gap:var(--gutter)}
.body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gutter);padding-top:clamp(40px,6vw,80px)}
.body section{display:contents}
.body h2{grid-column:1;margin:0;font-size:15px;font-weight:700;font-variation-settings:"wdth" 100;padding-top:4px;border-top:1px solid var(--ink)}
.body .txt{grid-column:2;border-top:1px solid var(--line);padding-top:4px;padding-bottom:clamp(28px,4vw,48px)}
.body .txt p{margin:0 0 14px;max-width:38em}
.body .txt ul{margin:0 0 14px;padding:0;list-style:none}
.body .txt li{padding:7px 0;border-bottom:1px solid var(--line);max-width:44em}
.body .credits p{margin:0;padding:5px 0;border-bottom:1px solid var(--line)}
@media (max-width:760px){.body{grid-template-columns:1fr}.body h2,.body .txt{grid-column:1}.body .txt{border-top:0}}
.stills{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-bottom:clamp(40px,6vw,80px)}
.stills img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
@media (max-width:620px){.stills{grid-template-columns:1fr 1fr}}
.next{display:block;text-decoration:none;border-top:1px solid var(--ink);padding-top:14px;padding-bottom:clamp(40px,6vw,80px)}
.next span{font-size:15px;color:var(--mute)}
.next strong{display:block;font-size:clamp(48px,9vw,150px);font-weight:800;font-variation-settings:"wdth" 62;text-transform:uppercase;line-height:.85}
.next:hover strong{color:var(--key)}

/* plain pages */
.page{padding-top:clamp(24px,4vw,56px);padding-bottom:clamp(48px,7vw,100px)}
.page h1{font-size:clamp(56px,12vw,200px);margin-bottom:clamp(28px,4vw,56px)}
.lede{font-size:clamp(22px,2.4vw,32px);line-height:1.2;font-weight:600;font-variation-settings:"wdth" 88;max-width:24em;margin:0 0 clamp(28px,4vw,48px)}
.prose p{max-width:38em}
.awards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0 var(--gutter)}
.awards h2{margin:0;padding:12px 0;border-top:1px solid var(--ink);font-size:clamp(26px,2.8vw,40px);line-height:.95;font-weight:800;font-variation-settings:"wdth" 66;text-transform:uppercase}
.awards h2 a{text-decoration:none}
.awards h2 a:hover{color:var(--key)}
.awards ul{margin:0;padding:12px 0 28px;list-style:none;border-top:1px solid var(--line)}
.awards li{padding:6px 0;border-bottom:1px solid var(--line)}
@media (max-width:760px){.awards{grid-template-columns:1fr}.awards ul{border-top:0}}

/* footer */
.foot{background:var(--ink);color:var(--paper);padding-top:clamp(40px,6vw,80px);padding-bottom:28px}
.foot .mail{display:inline-block;font-size:clamp(34px,6.4vw,104px);font-weight:800;font-variation-settings:"wdth" 62;text-transform:uppercase;line-height:.9;text-decoration:none;overflow-wrap:anywhere}
.foot .mail:hover{color:var(--key)}
.foot .small{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,5vw,64px);font-size:14px;color:#A5A9A1}
.foot .small a{color:var(--paper)}

.card.big{grid-column:span 2}
.card.big .shot{aspect-ratio:2.39/1}
.card.big h3{font-size:clamp(34px,4.4vw,64px)}
@media (max-width:620px){.card.big{grid-column:auto}.card.big .shot{aspect-ratio:16/9}}
@media (max-width:700px){
  .top{flex-direction:column;align-items:flex-start;gap:6px;padding-top:12px;padding-bottom:10px}
  .top nav{flex-wrap:nowrap;overflow-x:auto;max-width:100%;white-space:nowrap;scrollbar-width:none}
  .top nav a+a::before{margin:0 8px}
}
.cap{margin:10px 0 0;font-size:15px;color:var(--mute)}
.ai-row{display:grid;grid-template-columns:16fr 16fr 5fr;gap:clamp(12px,1.6vw,24px);align-items:start}
.player.tall{aspect-ratio:9/16}
@media (max-width:700px){.ai-row{grid-template-columns:1fr 1fr}.ai-row>div:last-child{grid-column:1/-1;max-width:260px}}
.stills.imdb img{aspect-ratio:auto;object-fit:contain;background:none}

.card img[src*="theywenttosea"]{object-position:50% 12%}
.tlink{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:1px 9px 1px 7px;border:1px solid var(--line);border-radius:999px;font-size:13px;line-height:1.5;color:var(--mute);text-decoration:none;vertical-align:1px;white-space:nowrap}
.tlink::before{content:"";width:0;height:0;border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent}
.tlink:hover{color:#fff;background:var(--key);border-color:var(--key)}
@media (max-width:620px){.stills.imdb{grid-template-columns:1.0054fr 0.4845fr !important}}
.lede .tlink{font-size:14px;font-weight:500;font-variation-settings:"wdth" 100;vertical-align:4px}
.tlink.imdb::before{display:none}

/* ---- One Eyed Pixel additions ---- */
.oep-mark{font-size:clamp(48px,16.6vw,300px)}
.people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px) var(--gutter);padding-bottom:clamp(56px,8vw,120px)}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;background:#d9dad5}
.person h3{margin:16px 0 4px;font-size:clamp(34px,4.4vw,64px);line-height:.9;font-weight:800;font-variation-settings:"wdth" 62;text-transform:uppercase}
.person .role{margin:0 0 14px;color:var(--key);font-weight:600}
.person p{margin:0 0 12px;max-width:34em}
.more{font-weight:600;text-underline-offset:4px;text-decoration-color:var(--key)}
@media (max-width:700px){.people{grid-template-columns:1fr}}
.covers{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);padding-bottom:28px}
.cover{text-decoration:none;display:block}
.cover .jk{aspect-ratio:3/4;background:#dcddd7;display:flex;align-items:center;justify-content:center;padding:clamp(12px,1.6vw,22px)}
.cover .jk img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 14px 30px -16px rgba(0,0,0,.5)}
.cover h3{margin:12px 0 2px;font-size:clamp(20px,2vw,28px);line-height:.95;font-weight:800;font-variation-settings:"wdth" 66;text-transform:uppercase}
.cover p{margin:0;font-size:15px;color:var(--mute)}
.cover:hover h3{color:var(--key)}
@media (max-width:860px){.covers{grid-template-columns:1fr 1fr}}
.button{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:700;padding:15px 26px;border-radius:999px}
.button:hover{background:var(--key)}
.clients{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);padding-bottom:clamp(56px,8vw,120px)}
.clients h3{margin:0 0 8px;font-size:15px;font-weight:700;border-top:1px solid var(--ink);padding-top:10px}
.clients p{margin:0;color:var(--mute);font-size:16px}
@media (max-width:860px){.clients{grid-template-columns:1fr 1fr}}
.make{list-style:none;margin:0;padding:0 0 clamp(56px,8vw,120px);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.make li{border-top:1px solid var(--ink);padding-top:10px;font-size:clamp(20px,2vw,28px);line-height:1.05;font-weight:700;font-variation-settings:"wdth" 80}
@media (max-width:860px){.make{grid-template-columns:1fr 1fr}}
.titles{display:grid;gap:clamp(40px,6vw,80px);padding-bottom:clamp(56px,8vw,120px)}
.title{display:grid;grid-template-columns:minmax(200px,420px) 1fr;gap:clamp(24px,4vw,56px);align-items:center;scroll-margin-top:80px}
.title .jacket img{width:100%;box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.title h3{margin:0 0 8px;font-size:clamp(34px,4.6vw,68px);line-height:.9;font-weight:800;font-variation-settings:"wdth" 62;text-transform:uppercase}
.title .by{margin:0 0 4px;font-weight:700}
.title .meta{margin:0 0 16px;color:var(--mute);font-size:16px}
.title .d{margin:0 0 18px;max-width:36em}
.links{display:flex;flex-wrap:wrap;gap:10px}
.links a{display:inline-block;border:1px solid var(--ink);border-radius:999px;padding:8px 16px;font-size:15px;font-weight:600;text-decoration:none}
.links a:hover{background:var(--key);border-color:var(--key);color:#fff}
.lang{display:inline-block;font-size:13px;font-weight:600;font-variation-settings:"wdth" 100;text-transform:none;color:#fff;background:var(--key);padding:3px 9px;border-radius:999px;vertical-align:middle;margin-left:10px;line-height:1.4}
@media (max-width:720px){.title{grid-template-columns:1fr}.title .jacket{max-width:300px}}
.letters{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);padding-bottom:clamp(56px,8vw,120px)}
.letter{display:block;text-decoration:none;background:var(--ink);color:var(--paper);padding:clamp(22px,3vw,36px)}
.letter h3{margin:0 0 8px;font-size:clamp(28px,3vw,44px);line-height:.9;font-weight:800;font-variation-settings:"wdth" 62;text-transform:uppercase}
.letter p{margin:0 0 16px;color:#B9BCB4}
.letter span{color:#fff;font-weight:700;border-bottom:2px solid var(--key)}
.letter:hover{background:var(--key)}
@media (max-width:700px){.letters{grid-template-columns:1fr}}
.person img{max-width:340px;aspect-ratio:1/1;object-position:50% 25%}
.title{grid-template-columns:340px 1fr}
.title .jacket img{width:340px;max-width:100%;height:auto}
@media (max-width:720px){.title{grid-template-columns:1fr}.title .jacket img{width:260px}}
.cover .jk img{width:78%;max-width:78%;max-height:none;aspect-ratio:.65;object-fit:cover}
