/* diegodeschuyter.com
   Black, quiet, the films first. Every film keeps the aspect ratio it was shot in. */
@font-face{font-family:"Inter";src:url("/assets/inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --black:#070708; --panel:#0d0e10; --white:#f1f2f2; --soft:rgba(241,242,242,.6); --line:rgba(241,242,242,.14);
  --pad:clamp(20px,3.4vw,40px);
  --sans:"Helvetica Neue",Helvetica,"Inter",Arial,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--black)}
body{margin:0;background:var(--black);color:var(--white);font:300 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:.25em;text-decoration-thickness:1px}
:focus-visible{outline:1px solid var(--white);outline-offset:4px}
img{display:block;max-width:100%}
h1,h2,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
.skip{position:absolute;left:-999px}
.skip:focus{left:var(--pad);top:8px;background:var(--white);color:var(--black);padding:8px 12px;z-index:9}
.quiet{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.center{justify-content:center;text-align:center}

/* small tracked capitals: nav, labels, buttons */
.label,.top nav,.name,.btn,.filters button,.cap-c,.cap-r,dt,.pager,label,.foot{font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.6}

.top{display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:space-between;align-items:center;padding:26px var(--pad)}
.is-home .top{position:absolute;inset:0 0 auto 0;z-index:3}
.name{font-size:.8rem;font-weight:800;letter-spacing:.22em;text-decoration:none}
.top nav{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center}
.top nav a{text-decoration:none;opacity:.6;padding:4px 0}
.top nav a:hover,.top nav a[aria-current]{opacity:1}
.langs{display:flex;gap:10px}
.langs i{font-style:normal;opacity:.3}

main{display:block}
.wrap,.work,.about,.contact,.film,.pad,.pad-b{padding-left:var(--pad);padding-right:var(--pad)}

/* home hero */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:#000;display:flex;align-items:flex-end}
.hero-media{position:absolute;inset:0}
.hero-media img,.hero-media iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media{--hr:1.7778}
.hero-media img:not([src]){visibility:hidden}
.hero-media iframe{width:max(100vw,calc(100svh * var(--hr)));height:max(100svh,calc(100vw / var(--hr)));opacity:0;transition:opacity 1.2s ease}
.hero-media iframe.on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,7,8,.92) 0%,rgba(7,7,8,.25) 45%,rgba(7,7,8,.45) 100%);pointer-events:none}
.hero-text{position:relative;z-index:2;padding:0 var(--pad) clamp(40px,8vh,88px);width:100%}
.hero h1{font-weight:800;font-size:clamp(2.6rem,6.3vw,7.5rem);line-height:.95;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;margin-left:-.04em}
.hero h1 span{display:inline}
@media (max-width:700px){.hero h1{font-size:9.4vw;letter-spacing:.08em;white-space:normal}.hero h1 span{display:block}}
.tag{font-weight:200;font-size:clamp(1.1rem,1.9vw,1.6rem);letter-spacing:-.01em;margin-top:22px;max-width:30em;line-height:1.3}
.hero .label{color:var(--soft);margin:14px 0 30px}
.hero-toggle{position:absolute;z-index:2;right:var(--pad);bottom:clamp(40px,8vh,88px);background:none;border:0;color:var(--white);opacity:.6;cursor:pointer;padding:6px 0;font-family:inherit}
.hero-toggle:hover{opacity:1}
@media (max-width:700px){.hero-toggle{bottom:auto;top:84px}}

.btn{display:inline-block;font-family:inherit;color:var(--white);background:transparent;border:1px solid rgba(241,242,242,.35);padding:13px 22px;text-decoration:none;cursor:pointer;letter-spacing:.2em;border-radius:0;transition:background .2s,color .2s}
.btn:hover{background:var(--white);color:var(--black);border-color:var(--white)}

.pad{padding-top:clamp(72px,12vw,150px);padding-bottom:clamp(72px,12vw,150px)}
.pad-b{padding-bottom:clamp(40px,6vw,80px)}
.statement{font-weight:200;font-size:clamp(1.4rem,3vw,2.5rem);line-height:1.25;letter-spacing:-.02em;max-width:24em;margin:0 auto;text-align:center;text-wrap:balance}

/* frames */
.frame{display:block;overflow:hidden;background:var(--panel)}
.frame img{width:100%;height:100%;object-fit:cover;transition:opacity .4s ease}
a:has(.frame){text-decoration:none;display:block}
.cap{display:grid;grid-template-columns:1fr auto;gap:2px 24px;padding-top:16px;align-items:baseline}
.cap-c{color:var(--soft);grid-column:1/-1}
.cap-t{font-weight:800;font-size:clamp(1.1rem,1.7vw,1.5rem);letter-spacing:-.03em;text-transform:uppercase;line-height:1.1}
.cap-r{color:var(--soft);text-align:right}
@media (max-width:700px){.cap{grid-template-columns:1fr}.cap-r{text-align:left;margin-top:4px}}

.picks{display:grid;gap:clamp(72px,11vw,150px)}
.pick{width:min(100%,calc(84vh * var(--r)));margin:0 auto}
.more{margin:clamp(72px,10vw,130px) 0;display:flex;flex-wrap:wrap;gap:12px}
@media (hover:hover){.picks:hover .frame img,.grid:hover .frame img{opacity:.45}.picks a:hover .frame img,.grid a:hover .frame img{opacity:1}}

/* work */
.work h1,.about h1,.contact h1{font-weight:800;font-size:clamp(2rem,5vw,4rem);line-height:1;letter-spacing:-.035em;text-transform:uppercase;padding:clamp(48px,8vw,110px) 0 28px;text-wrap:balance}
.filters{display:flex;flex-wrap:wrap;gap:6px 26px;margin-bottom:clamp(32px,5vw,64px)}
.filters button{font-family:inherit;color:var(--white);background:none;border:0;border-bottom:1px solid transparent;padding:6px 0;cursor:pointer;opacity:.5}
.filters button:hover{opacity:1}
.filters button[aria-pressed=true]{opacity:1;border-bottom-color:var(--white)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,480px),1fr));gap:clamp(48px,6vw,88px) clamp(20px,3vw,40px);align-items:start;padding-bottom:clamp(72px,10vw,130px)}
.grid li[hidden]{display:none}

/* film page */
.film{padding-top:8px}
.player{position:relative;background:#000;margin:0 auto;width:min(100%,calc(80vh * var(--r)))}
.player button{all:unset;display:block;position:absolute;inset:0;cursor:pointer}
.player button:focus-visible{outline:1px solid var(--white);outline-offset:4px}
.player img{width:100%;height:100%;object-fit:cover}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.go{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:1px solid rgba(241,242,242,.7);background:rgba(7,7,8,.25);transition:background .2s}
.go::after{content:"";position:absolute;left:34px;top:29px;border-left:20px solid var(--white);border-top:12px solid transparent;border-bottom:12px solid transparent}
.player button:hover .go{background:var(--white)}
.player button:hover .go::after{border-left-color:var(--black)}
.sheet{display:grid;gap:32px 64px;padding:clamp(36px,5vw,72px) 0}
@media (min-width:900px){.sheet{grid-template-columns:1fr 1fr}}
.sheet .label{color:var(--soft);margin-bottom:12px}
.sheet h1{font-weight:800;font-size:clamp(1.9rem,4.2vw,3.6rem);line-height:1;letter-spacing:-.035em;text-transform:uppercase;text-wrap:balance}
.note{font-weight:200;font-size:1.3rem;line-height:1.35;letter-spacing:-.01em;max-width:28em;margin-bottom:32px}
dl div{display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:16px;padding:13px 0;border-top:1px solid var(--line);align-items:baseline}
dl div:last-child{border-bottom:1px solid var(--line)}
dt{color:var(--soft)}
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding:8px 0 clamp(72px,10vw,130px)}
.pager a{text-decoration:none;opacity:.6}
.pager a:hover{opacity:1}
@media (min-width:900px){
  .film.vertical{display:grid;grid-template-columns:auto 1fr;gap:0 64px}
  .film.vertical .player{width:calc(80vh * var(--r))}
  .film.vertical .sheet{grid-template-columns:1fr;align-content:start;padding-top:0}
  .film.vertical .pager{grid-column:1/-1;padding-top:48px}
}

/* about */
.about-cols{display:grid;gap:36px 72px;align-items:start}
@media (min-width:900px){.about-cols:has(.portrait){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.portrait img{width:100%}
.prose{max-width:34em}
.prose p+p{margin-top:1.1em}
.lead{font-weight:200;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.25;letter-spacing:-.02em;max-width:22em;margin-bottom:1em}
.about h2{font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin:clamp(64px,9vw,120px) 0 18px}
.facts{max-width:900px}

/* contact */
.contact{max-width:calc(720px + 2 * var(--pad))}
form{display:grid;gap:8px;margin-top:40px}
label{color:var(--soft);margin-top:18px}
input,textarea{font:300 1rem/1.5 var(--sans);color:var(--white);background:transparent;border:0;border-bottom:1px solid rgba(241,242,242,.35);padding:10px 0;width:100%;border-radius:0}
input:focus,textarea:focus{outline:0;border-bottom-color:var(--white)}
textarea{resize:vertical}
form .btn{justify-self:start;margin-top:28px}
.hp{position:absolute;left:-9999px}
.direct{margin:48px 0 clamp(72px,10vw,130px);color:var(--soft)}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 48px;padding:32px var(--pad) 44px;border-top:1px solid var(--line);color:var(--soft);line-height:2}
.foot a{text-decoration:none}
.foot a:hover{color:var(--white)}

/* about: small round portrait, serif greeting */
@font-face{font-family:"Instrument Serif";src:url("/assets/instrument-serif.woff2") format("woff2");font-weight:400;font-display:swap}
.hello{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;padding:clamp(48px,8vw,110px) 0 clamp(32px,5vw,56px)}
.portrait{flex:none;width:132px;height:132px;border-radius:50%;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:68% 30%;transform:scale(1.9);transform-origin:68% 36%}
.about .hello h1{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400;text-transform:none;letter-spacing:-.015em;font-size:clamp(2.8rem,7vw,5.6rem);line-height:1;padding:0}
@media (min-width:900px){.about-cols:has(.portrait){grid-template-columns:1fr}}

/* home: only the film, a caption and a cue to scroll */
.hero::after{background:linear-gradient(to top,rgba(7,7,8,.7) 0%,rgba(7,7,8,0) 30%,rgba(7,7,8,0) 75%,rgba(7,7,8,.45) 100%)}
.hero-now,.hero-down,.hero-toggle{position:absolute;z-index:2;bottom:clamp(28px,5vh,44px);text-decoration:none;color:var(--white)}
.hero-now{left:var(--pad);opacity:.75;max-width:40vw}
.hero-now:hover{opacity:1}
.hero-toggle{right:var(--pad);top:auto}
.hero-down{left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;bottom:0;opacity:.85}
.hero-down:hover{opacity:1}
.hero-down i{display:block;width:1px;height:clamp(40px,8vh,72px);background:var(--white);transform-origin:top}
@media (prefers-reduced-motion:no-preference){.hero-down i{animation:cue 2.4s cubic-bezier(.6,0,.2,1) infinite}}
@keyframes cue{0%{transform:scaleY(0)}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (max-width:700px){.hero-now{max-width:80vw;bottom:calc(clamp(40px,8vh,72px) + 64px)}.hero-toggle{top:auto;bottom:clamp(28px,5vh,44px)}}
.sub{font-weight:300;color:var(--soft);max-width:34em;margin:28px auto 0;text-align:center;text-wrap:balance}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ------------------------------------------------------------------
   Layout system: four columns, 26px page margin, 10px gutters,
   7px corners. Text lives in the left half, films in the right half.
   ------------------------------------------------------------------ */
:root{--pad:26px;--gap:10px;--rad:7px}
@media (max-width:899px){:root{--pad:10px;--gap:8px}}

.top{padding:22px var(--pad)}
@media (min-width:900px){
  .top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);align-items:baseline}
  .top nav{grid-column:2/-1}
  .top .langs{margin-left:auto}
}
.frame,.player,.player img,.player iframe{border-radius:var(--rad)}
.player{overflow:hidden}

/* split: text left, films right */
.split{display:grid;gap:var(--gap);padding:var(--pad);padding-top:clamp(40px,7vw,96px)}
.work.split{padding-top:var(--gap)}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .side{position:sticky;top:var(--pad);max-height:calc(100vh - 2 * var(--pad));overflow:auto;scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
}
.split .statement{margin:0;text-align:left;font-size:clamp(1.4rem,2.4vw,2.2rem);max-width:17em}
.split .sub{margin:22px 0 0;text-align:left;max-width:30em}
.split .more{margin:34px 0 clamp(32px,5vw,0px)}

/* the stack of films */
.stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);grid-auto-flow:dense}
.tile.wide{grid-column:1/-1}
.tile a{display:block;position:relative;text-decoration:none;border-radius:var(--rad);overflow:hidden}
.tile .frame{border-radius:0}
.over{position:absolute;inset:auto 0 0 0;display:flex;flex-wrap:wrap;gap:0 .9em;align-items:baseline;padding:44px 14px 12px;
  background:linear-gradient(to top,rgba(7,7,8,.82),rgba(7,7,8,0));font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.6}
.over b{font-weight:800}
.over i{font-style:normal;opacity:.6;margin-left:auto;text-align:right}
@media (hover:hover) and (min-width:900px){
  .over{opacity:0;transition:opacity .25s ease}
  .tile a:hover .over,.tile a:focus-visible .over,.tile.is-on .over{opacity:1}
  .stack:hover .frame img,.stack.has-on .frame img{opacity:.4}
  .stack .tile a:hover .frame img,.stack .tile.is-on .frame img{opacity:1}
}
@media (max-width:899px){.over i{display:none}.over{padding:36px 10px 9px}}
.stack.named .over{opacity:1}
.stack.named:hover .frame img{opacity:.4}

/* the index beside the stack */
.index{display:grid;gap:34px;align-content:start}
.idx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap)}
.idx h1,.idx h2,.idx p,.idx a{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.9;margin:0;padding:0}
.idx h1,.idx h2{font-weight:800}
.idx p,.idx a{font-weight:500}
.work .idx h1{padding:0;font-size:.72rem;letter-spacing:.14em;line-height:1.9}
.idx a{text-decoration:none;opacity:.6;display:block}
.idx a:hover,.idx a.is-on{opacity:1}
@media (max-width:899px){.index{display:none}}

/* film page */
.film{padding:var(--gap) var(--pad) 0}
.sheet{gap:28px var(--gap);padding:clamp(28px,4vw,56px) 0}
.pager{padding-bottom:clamp(48px,7vw,96px)}

/* about and contact on the same two halves */
.about,.contact{padding:0 var(--pad)}
.about{display:grid;gap:0 var(--gap)}
.contact.two{max-width:none;display:grid;gap:0 var(--gap);padding-bottom:clamp(48px,7vw,96px)}
@media (min-width:900px){
  .about{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .about .hello{grid-column:1/-1}
  .about-side h2{margin-top:0}
  .about-side .more{margin-bottom:clamp(48px,7vw,96px)}
  .contact.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .contact.two form{margin-top:clamp(48px,8vw,110px);padding-top:6px}
  .contact.two form label:first-of-type{margin-top:0}
}
.contact.two .direct{margin:32px 0 0}
.hello{padding:clamp(40px,7vw,96px) 0 clamp(28px,4vw,48px)}
.work h1,.about h1,.contact h1{padding-top:clamp(40px,7vw,96px)}
.about .hello h1{padding:0}
.foot{padding:22px var(--pad) 28px}

/* About and Contact: the film index stays on the left, the page itself is one narrow
   column of small text starting at the middle of the screen. */
.text-page{padding-top:var(--gap);min-height:calc(100vh - 150px)}
.text-page .col{max-width:430px;font-size:.875rem;line-height:1.5;font-weight:400}
.text-page .idx h2 a{opacity:1;font-weight:800}
.text-page .hello{display:flex;align-items:center;gap:16px;padding:0 0 22px;flex-wrap:nowrap}
.text-page .portrait{width:72px;height:72px}
.text-page .hello h1{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400;text-transform:none;letter-spacing:-.01em;font-size:2.1rem;line-height:1.05;padding:0;margin:0}
.text-page .small-h{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1.9;padding:0;margin:0 0 14px}
.text-page .prose{max-width:none}
.text-page .prose p+p{margin-top:.9em}
.text-page .facts{max-width:none;margin-top:34px}
.text-page .facts div{display:block;padding:0;border:0;margin-top:16px}
.text-page .facts div:last-child{border:0}
.text-page .facts dt{color:var(--white);font-weight:800;margin-bottom:2px}
.text-page .mail{margin-top:16px;font-weight:700}
.text-page .mail+.mail{margin-top:2px}
.text-page .mail a{text-decoration:none}
.text-page .mail a:hover{text-decoration:underline}
.text-page form{margin-top:34px;gap:4px}
.text-page form label{margin-top:14px}
.text-page input,.text-page textarea{font-size:.875rem;font-weight:400;padding:8px 0}
.text-page form .btn{margin-top:22px}
@media (max-width:899px){.text-page{padding-top:28px}.text-page .col{max-width:none}}

/* Films page: the grid with titles under each frame, on the 26px margins. About and Contact: the small text column alone. */
.work{padding:0 var(--pad)}
.grid{gap:clamp(40px,5vw,64px) var(--pad)}
.text-page{padding:clamp(28px,5vw,64px) var(--pad) clamp(56px,8vw,110px);min-height:calc(100vh - 170px)}
@media (min-width:900px){.text-page .col{margin-left:auto;margin-right:auto}}
.player .out{position:absolute;inset:0;display:block}
.player .out:hover .go{background:var(--white)}
.player .out:hover .go::after{border-left-color:var(--black)}
.out-label{position:absolute;left:16px;bottom:14px;color:var(--white);text-shadow:0 1px 12px rgba(0,0,0,.6)}